html5使用canvas实现图片下载功能的示例代码


Posted in HTML / CSS onAugust 26, 2017

最近项目中需要实现一个下载图片的功能(如下图)

html5使用canvas实现图片下载功能的示例代码

一开始考虑使用a标签的download属性进行下载:

<a href="图片src" download="下载海报">
下载海报
</a>

但是通过测试,发现再safari中,下载的文件不能带上拓展名,所以只好换一个思路,使用canvas进行处理。

1.图片需要添加crossOrigin='anonymous'设置图像的跨域属性

img.crossOrigin = 'anonymous';

2.使用toDataURL把图片转换成base64格式

canvas.toDataURL("image/png")

3.使用模拟点击事件,触发下载

var save_link = document.createElement('a');
     save_link.href = image;
     save_link.download ='测试.png';
                           
 var clickevent = document.createEvent('MouseEvents');
     clickevent.initEvent('click', true, false);
     save_link.dispatchEvent(clickevent);

完整代码:

var canvas = $('.canvas');
var cxt = canvas[0].getContext("2d");
function save(){
    var img = new Image();
    img.crossOrigin = 'anonymous';
    img.onload = function(){
        var _w = img.naturalWidth;
        var _h = img.naturalHeight;
        canvas.attr({width:_w,height:_h});
        cxt.drawImage(img,0,0);
        var image = canvas[0].toDataURL("image/png")
        var save_link = document.createElement('a');
        save_link.href = image;
        save_link.download ='测试.png';
                           
       var clickevent = document.createEvent('MouseEvents');
           clickevent.initEvent('click', true, false);
           save_link.dispatchEvent(clickevent);
    };
    img.src = 'http://n.sinaimg.cn/sports/transform/20170825/NZI3-    fykiufe6650492.jpg';
}

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

HTML / CSS 相关文章推荐
css3 border-radius属性详解
Jul 05 HTML / CSS
CSS3 calc()会计算属性详解
Feb 27 HTML / CSS
纯CSS3实现圆角效果(含IE兼容解决方法)
May 07 HTML / CSS
css3的transform中scale缩放详解
Dec 08 HTML / CSS
CSS3实现大小不一的粒子旋转加载动画
Apr 21 HTML / CSS
html5调用摄像头功能的实现代码
May 07 HTML / CSS
input file上传文件样式支持html5的浏览器解决方案
Nov 14 HTML / CSS
HTML5之SVG 2D入门11—用户交互性(动画)介绍及应用
Jan 30 HTML / CSS
让IE9以下版本的浏览器兼容HTML5的方法
Mar 12 HTML / CSS
移动端html5 meta标签的神奇功效
Jan 06 HTML / CSS
iphoneX 适配客户端H5页面的方法教程
Dec 08 HTML / CSS
AmazeUI框架搭建的方法步骤(图文)
Aug 17 HTML / CSS
html5+CSS3+JS实现七夕言情功能代码
Aug 28 #HTML / CSS
html5使用html2canvas实现浏览器截图的示例
Aug 31 #HTML / CSS
前端面试必备之html5的新特性
Sep 05 #HTML / CSS
html5仿支付宝密码框的实现代码
Sep 06 #HTML / CSS
HTML5 本地存储实现购物车功能
Sep 07 #HTML / CSS
HTML5 FormData 方法介绍以及实现文件上传示例
Sep 12 #HTML / CSS
html5自带表单验证体验优化及提示气泡修改功能
Sep 12 #HTML / CSS
You might like
解析在zend Farmework下如何创立一个FORM表单
2013/06/28 PHP
PHP删除数组中特定元素的两种方法
2013/07/02 PHP
PHP读取RSS(Feed)简单实例
2014/06/12 PHP
php中unserialize返回false的解决方法
2014/09/22 PHP
php专用数组排序类ArraySortUtil用法实例
2015/04/03 PHP
php mysql获取表字段名称和字段信息的三种方法
2016/11/13 PHP
如何做到打开一个页面,过几分钟自动转到另一页面
2007/04/20 Javascript
js 深拷贝函数
2008/12/04 Javascript
Js 获取HTML DOM节点元素的方法小结
2009/04/24 Javascript
js列举css中所有图标的实现代码
2011/07/04 Javascript
设置iframe的document.designMode后仅Firefox中其body.innerHTML为br
2012/02/27 Javascript
自己实现string的substring方法 人民币小写转大写,数字反转,正则优化
2012/09/02 Javascript
js+JQuery返回顶部功能如何实现
2012/12/03 Javascript
javascript 实现简单的table排序及table操作练习
2012/12/28 Javascript
jquery简单的拖动效果实现原理及示例
2013/07/26 Javascript
探索webpack模块及webpack3新特性
2017/09/18 Javascript
jQuery实现验证表单密码一致性及正则表达式验证邮箱、手机号的方法
2017/12/05 jQuery
基于Nodejs的Tcp封包和解包的理解
2018/09/19 NodeJs
JS实现查找数组中对象的属性值是否存在示例
2019/05/24 Javascript
深入剖析JavaScript instanceof 运算符
2019/06/14 Javascript
jquery 插件重新绑定的处理方法分析
2019/11/23 jQuery
javascript中闭包closure的深入讲解
2021/03/03 Javascript
[52:52]完美世界DOTA2联赛PWL S3 LBZS vs access 第一场 12.10
2020/12/13 DOTA
Python中tell()方法的使用详解
2015/05/24 Python
详解Python数据分析--Pandas知识点
2019/03/23 Python
Python3匿名函数lambda介绍与使用示例
2019/05/18 Python
租租车:国际租车、美国租车、欧洲租车、特价预订国外租车(中文服务)
2018/03/28 全球购物
餐饮主管岗位职责
2013/12/10 职场文书
12月小学生校园广播稿
2014/02/04 职场文书
电台编导求职信
2014/05/06 职场文书
就业导师推荐信范文
2015/03/27 职场文书
村党组织公开承诺书
2015/04/30 职场文书
聘用合同范本
2015/09/21 职场文书
MySQL不使用order by实现排名的三种思路总结
2021/06/02 MySQL
使用 Apache Dubbo 实现远程通信(微服务架构)
2022/02/12 Servers
古见同学有交流障碍症 第二季宣传CM公开播出
2022/04/11 日漫