1. canvas 保存图片

  2. 下载到本地

    function base64Img2Blob(code){
    var parts = code.split(';base64,');
    var contentType = parts[0].split(':')[1];
    var raw = window.atob(parts[1]);
    var rawLength = raw.length; var uInt8Array = new Uint8Array(rawLength); for (var i = 0; i < rawLength; ++i) {
    uInt8Array[i] = raw.charCodeAt(i);
    } return new Blob([uInt8Array], {type: contentType});
    }
    function downloadFile(fileName, content){ var aLink = document.createElement('a');
    var blob = base64Img2Blob(content); //new Blob([content]); var evt = document.createEvent("HTMLEvents");
    evt.initEvent("click", false, false);//initEvent 不加后两个参数在FF下会报错
    aLink.download = fileName;
    aLink.href = URL.createObjectURL(blob); aLink.dispatchEvent(evt);
    }
    downloadFile('ship.png', canvas.toDataURL("image/png"));

      

js实现canvas保存图片为png格式并下载到本地的更多相关文章

  1. Node.js 使用http客户端得到网站的图片下载到本地

    以下代码有些冗余,大家捡核心看就好. // 内置http模块,提供了http服务器和客户端功能 var http=require("http"); // cheerio模块,提供了 ...

  2. js+Canvas 利用js 实现浏览器保存图片到本地

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  3. Particles.js基于Canvas画布创建粒子原子颗粒效果

    文章目录 使用方法 自定义参数 相关链接 Particles.js是一款基于HTML5 Canvas画布的轻量级粒子动画插件,可以设置粒子的形状.旋转.分布.颜色等属性,还可以动态添加粒子,效果非常炫 ...

  4. 原生js实现canvas气泡冒泡效果

    说明: 本文章主要分为ES5和ES6两个版本 ES5版本是早期版本,后面用ES6重写优化的,建议使用ES6版本. 1, 原生js实现canvas气泡冒泡效果的插件,api丰富,使用简单2, 只需引入J ...

  5. captcha.js一个生成验证码的插件,使用js和canvas生成

    一.captcha`captcha.js`是一个生成验证码的插件,使用js和canvas生成的,确保后端服务被暴力攻击,简单判断人机以及系统的安全性,体积小,功能多,支持配置. 验证码插件内容,包含1 ...

  6. js中时间戳转换成时间格式

    js中时间戳转换成时间格式, // 时间戳转换成时间格式 var formatDate = function(date){ date = new Date(date); var y=date.getF ...

  7. 【最简单的方法】js判断字符串是否为JSON格式(20180115更新)

    前言 针对 “js判断字符串是否为JSON格式” 这个问题,在网上查了许多资料,都没找到自己想要的答案. 但是看到这个帖子<js判断字符串是否为JSON格式>后,突然灵光一闪,想到一种很简 ...

  8. js时间戳怎么转成日期格式

    原文地址:http://www.sufeinet.com/thread-1500-1-1.html js时间戳怎么转成日期格式这个在主群里有朋友§☆釺哖蟲...o问js时间戳怎么转成日期格式 ,他的问 ...

  9. js将json数据以csv格式下载

    摘要: 最近有一个非项目的小需求,就是将项目开发分工文件化,方便后期管理维护.但是开发时,分工安排都是以json格式记录的,所以就做了一个将json数据以csv格式下载到本地. 代码: <!DO ...

随机推荐

  1. Android AppCompatActivity去掉actionbar fullScreen

    网上已经有很多关于这个问题的解决方案,如果你试了都没有解决,那么请往下看.首先说下网上说的解决方案: 方案一:在AndroidManifest.xml中,为需要进行全屏显示的activity添加如下主 ...

  2. python_django_上传文件

    存储路径: 存储在服务器的项目的static/upfile(你说了算的文件名,但是一般俺们叫这个)文件中 配置: 配置settings.py文件 MDEIA_ROOT = os.path.join(B ...

  3. express 的路由学习

    使用步骤 - :获取路由中间件对象 `let router = express.Router();` - :配置路由规则 `router.请求方式(URL,fn事)` - fn中参数有req,res, ...

  4. Galaxy

    Galaxy 在一维坐标轴上给出n个点,第i个点坐标为\(x_i\),现在你可以任意移动k个点的,最小化它们的方差,\(n\leq 50000\). 解 感觉以前写的太乱了,补一篇可以供快速阅读的题解 ...

  5. Windows API 查看器

    { http://www.dependencywalker.com/ } { Download the latest version here:  Download Version 2.2.6000 ...

  6. 如何重置Magento管理用户、角色和资源的权限

    场景1:所有的资源权限被设置为管理角色 步骤1:获取当前的管理角色详细信息 SELECT * FROM admin_role WHERE role_name = 'Administrators' /* ...

  7. 天梯L3-003. 社交集群——并查集

    在社交网络平台注册时,用户通常会输入自己的兴趣爱好,以便找到和自己兴趣相投的朋友.有部分兴趣相同的人们就形成了“社交集群”.现请你编写程序,找出所有的集群. 输入格式: 输入的第一行给出正整数N(&l ...

  8. linux python3 venv 虚拟环境报错 [-Im', 'ensurepip', '--upgrade', '--default-pip']' returned non-zero exit status 2.

    解决办法: 先创建没有pip的虚拟环境,然后启动虚拟环境后,再安装pip 办法一: 亲测失败了... python3 -m venv --without-pip py36env 办法二 sudo ap ...

  9. 2.4 webpack + gulp 构建完整前端工作流

    在前面的两个小节中已经完整的讲了 webpack 和 gulp 相关的内容,本小节中将会结合二者构建一个完整的前端工作流,内容目录为: 前端工程结构和目标 前端工程目录结构 gulp clean gu ...

  10. 如何使用Intellij IDEA工具导入SVN项目

    Intellij IDEA是目前主流的IDE开发工具,工程项目导入也是必不可少的操作,本文讲述如何用 IDEA工具导入SVN项目. 步骤一:选择VCS打开Intellij IDEA开发工具,在导航栏中 ...