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 相关文章推荐
IE iframe的onload方法分析小结
Jan 07 Javascript
jQuery UI-Draggable 参数集合
Jan 10 Javascript
Javascript 类型转换方法
Oct 24 Javascript
页面调用单个swf文件,嵌套出多个方法。
Nov 21 Javascript
Jquery检验手机号是否符合规则并根据手机号检测结果将提交按钮设为不同状态
Nov 26 Javascript
详解JavaScript异步编程中jQuery的promise对象的作用
May 03 Javascript
JavaScript对象数组排序实例方法浅析
Jun 15 Javascript
AngularJs  Creating Services详解及示例代码
Sep 02 Javascript
将angular.js项目整合到.net mvc中的方法详解
Jun 29 Javascript
JS双向链表实现与使用方法示例(增加一个previous属性实现)
Jan 31 Javascript
vue3.0生命周期的示例代码
Sep 24 Javascript
node中短信api实现验证码登录的示例代码
Jan 20 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
深入密码加salt原理的分析
2013/06/06 PHP
thinkPHP多语言切换设置方法详解
2016/11/11 PHP
PHP读取并输出XML文件数据的简单实现方法
2017/12/22 PHP
详解PHP中mb_strpos的使用
2018/02/04 PHP
PHP7.1实现的AES与RSA加密操作示例
2018/06/15 PHP
PHP实现PDO操作mysql存储过程示例
2019/02/13 PHP
PHP强制转化的形式整理
2020/05/22 PHP
PHP ob缓存以及ob函数原理实例解析
2020/11/13 PHP
Jquery弹出窗口插件 LeanModal的使用方法
2012/03/10 Javascript
jQuery中noconflict函数的实现原理分解
2015/02/03 Javascript
jq stop()和:is(:animated)的用法及区别(详解)
2017/02/12 Javascript
在Angular中使用JWT认证方法示例
2018/09/10 Javascript
React SSR样式及SEO的实践
2018/10/22 Javascript
vue项目动态设置页面title及是否缓存页面的问题
2018/11/08 Javascript
JavaScript深入V8引擎以及编写优化代码的5个技巧
2019/06/24 Javascript
简单了解JS打开url的方法
2020/02/21 Javascript
nginx部署多个vue项目的方法示例
2020/09/06 Javascript
Python中的with语句与上下文管理器学习总结
2016/06/28 Python
利用python求解物理学中的双弹簧质能系统详解
2017/09/29 Python
Python BS4库的安装与使用详解
2018/08/08 Python
pycharm重置设置,恢复默认设置的方法
2018/10/22 Python
Python解决两个整数相除只得到整数部分的实例
2018/11/10 Python
基于virtualenv创建python虚拟环境过程图解
2020/03/30 Python
python3用PyPDF2解析pdf文件,用正则匹配数据方式
2020/05/12 Python
Anaconda详细安装步骤图文教程
2020/11/12 Python
店长职务说明书
2014/02/04 职场文书
机关门卫的岗位职责
2014/04/29 职场文书
小学班级口号
2014/06/09 职场文书
党支部反对四风思想汇报
2014/10/10 职场文书
给老婆的检讨书1000字
2015/01/01 职场文书
东京审判观后感
2015/06/01 职场文书
运动会广播稿200字
2015/08/19 职场文书
生产实习心得体会范文
2016/01/22 职场文书
《生物入侵者》教学反思
2016/02/16 职场文书
关于React Native使用axios进行网络请求的方法
2021/08/02 Javascript
MySQL中几种插入和批量语句实例详解
2021/09/14 MySQL