js实现canvas保存图片为png格式并下载到本地的方法


Posted in Javascript onAugust 31, 2017

整理文档,搜刮出一个js实现canvas保存图片为png格式并下载到本地的方法,稍微整理精简一下做下分享。

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"));

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript 读取元素的CSS信息的代码
Feb 07 Javascript
jQuery插件 tabBox实现代码
Feb 09 Javascript
JavaScript之appendChild、insertBefore和insertAfter使用说明
Dec 30 Javascript
JavaScript高级程序设计(第3版)学习笔记12 js正则表达式
Oct 11 Javascript
JavaScript生成GUID的多种算法小结
Aug 18 Javascript
使用phantomjs进行网页抓取的实现代码
Sep 29 Javascript
浅谈jQuery中replace()方法
May 13 Javascript
通过点击jqgrid表格弹出需要的表格数据
Dec 02 Javascript
10分钟掌握XML、JSON及其解析
Dec 06 Javascript
jQuery用FormData实现文件上传的方法
Nov 21 Javascript
JS判断是否手机或pad访问实现方法
Dec 09 Javascript
Vuex,iView UI面包屑导航使用扩展详解
Nov 04 Javascript
js实现canvas图片与img图片的相互转换的示例
Aug 31 #Javascript
vue实现全选和反选功能
Aug 31 #Javascript
浅谈Vue 初始化性能优化
Aug 31 #Javascript
Vue keep-alive实践总结(推荐)
Aug 31 #Javascript
深入理解vue-router之keep-alive
Aug 31 #Javascript
vue-router 导航钩子的具体使用方法
Aug 31 #Javascript
浅谈express 中间件机制及实现原理
Aug 31 #Javascript
You might like
PHP生成不重复随机数的方法汇总
2014/11/19 PHP
PHP面向对象程序设计方法实例详解
2016/12/24 PHP
PHP新特性详解之命名空间、性状与生成器
2017/07/18 PHP
THINKPHP5分页数据对象处理过程解析
2020/10/28 PHP
js实现非常简单的焦点图切换特效实例
2015/05/07 Javascript
javascript中一些util方法汇总
2015/06/10 Javascript
JavaScript中的this机制
2016/01/30 Javascript
js实现密码强度检测【附示例】
2016/03/30 Javascript
理解javascript对象继承
2016/04/17 Javascript
基于jQuery实现歌词滚动版音乐播放器的代码
2016/09/17 Javascript
weUI应用之JS常用信息提示弹层的封装
2016/11/21 Javascript
基于代数方程库Algebra.js解二元一次方程功能示例
2017/06/09 Javascript
JavaScript贪吃蛇小组件实例代码
2017/08/20 Javascript
bootstrap Table服务端处理分页(后台是.net)
2017/10/19 Javascript
Node Puppeteer图像识别实现百度指数爬虫的示例
2018/02/22 Javascript
JavaScript中的E-mail 地址格式验证
2018/03/28 Javascript
Vue-Quill-Editor富文本编辑器的使用教程
2018/09/21 Javascript
独立部署小程序基于nodejs的服务器过程详解
2019/06/24 NodeJs
js实现图片无缝循环轮播
2019/10/28 Javascript
JS 创建对象的模式实例小结
2020/04/28 Javascript
JavaScript冒泡算法原理与实现方法深入理解
2020/06/04 Javascript
js实现盒子拖拽动画效果
2020/08/09 Javascript
浅析vue中的nextTick
2020/12/28 Vue.js
Python批量重命名同一文件夹下文件的方法
2015/05/25 Python
python 性能提升的几种方法
2016/07/15 Python
python中如何使用朴素贝叶斯算法
2017/04/06 Python
PyQt5实现简单数据标注工具
2019/03/18 Python
详解Selenium+PhantomJS+python简单实现爬虫的功能
2019/07/14 Python
python中的 zip函数详解及用法举例
2020/02/16 Python
基于python检查矩阵计算结果
2020/05/21 Python
几个常见的软件测试问题
2016/09/07 面试题
建筑设计师岗位职责
2013/11/18 职场文书
责任心演讲稿
2014/05/14 职场文书
机械电子工程专业求职信
2014/06/22 职场文书
起诉书格式范文
2015/05/20 职场文书
小学语文教师研修日志
2015/11/13 职场文书