phpcanvas下载图片,实例详解html5使用canvas实现图片下载功能

这篇文章主要介绍了html5使用canvas实现图片下载功能的示例代码,非常具有实用价值&＃xff0c;需要的朋友可以参考下

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

一开始考虑使用a标签的download属性进行下载&＃xff1a;

下载海报

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

1.图片需要添加crossOrigin&＃61;&＃39;anonymous&＃39;设置图像的跨域属性

img.crossOrigin &＃61; &＃39;anonymous&＃39;;

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

canvas.toDataURL("image/png")

3.使用模拟点击事件&＃xff0c;触发下载

var save_link &＃61; document.createElement(&＃39;a&＃39;);

save_link.href &＃61; image;

save_link.download &＃61;&＃39;测试.png&＃39;;

var clickevent &＃61; document.createEvent(&＃39;MouseEvents&＃39;);

clickevent.initEvent(&＃39;click&＃39;, true, false);

save_link.dispatchEvent(clickevent);

完整代码&＃xff1a;

var canvas &＃61; $(&＃39;.canvas&＃39;);

var cxt &＃61; canvas[0].getContext("2d");

function save(){

var img &＃61; new Image();

img.crossOrigin &＃61; &＃39;anonymous&＃39;;

img.onload &＃61; function(){

var _w &＃61; img.naturalWidth;

var _h &＃61; img.naturalHeight;

canvas.attr({width:_w,height:_h});

cxt.drawImage(img,0,0);

var image &＃61; canvas[0].toDataURL("image/png")

var save_link &＃61; document.createElement(&＃39;a&＃39;);

save_link.href &＃61; image;

save_link.download &＃61;&＃39;测试.png&＃39;;

var clickevent &＃61; document.createEvent(&＃39;MouseEvents&＃39;);

clickevent.initEvent(&＃39;click&＃39;, true, false);

save_link.dispatchEvent(clickevent);

};

img.src &＃61; &＃39;http://n.sinaimg.cn/sports/transform/20170825/NZI3- fykiufe6650492.jpg&＃39;;

}