最近一个项目需要实现一个下载图片的功能（如下图）。一开始我考虑使用a标签的download属性来下载：downloadposter但是通过测试，我发现在safari中，下载的文件不能带扩展名，只好改弦更张，用canvas处理。1.图片需要添加crossOrigin='anonymous'来设置图片的跨域属性img.crossOrigin='anonymous';2、使用toDataURL将图片转为base64格式canvas.toDataURL("image/png")3.使用模拟点击事件，触发下载varsave_link=document.createElement('a');save_link.href=图片；save_link.download='test.png';varclickevent=document.createEvent('MouseEvents');clickevent.initEvent('点击',true,false);save_link.dispatchEvent(clickevent);完整代码：varcanvas=$('.canvas');varcxt=canvas[0].getContext("2d");functionsave(){varimg=newImage();img.crossOrigin='匿名';img.onload=function(){var_w=img.naturalWidth;var_h=img.naturalHeight;canvas.attr({width:_w,height:_h});cxt.drawImage(img,0,0);varimage=canvas[0].toDataURL("image/png")var保存链接=document.createElement('a');save_link.href=图片；save_link.download='测试.png';varclickevent=document.createEvent('MouseEvents');clickevent.initEvent('点击',true,false);save_link.dispatchEvent(clickevent);};img.src='http://n.sinaimg.cn/sports/transform/20170825/NZI3-fykiufe6650492.jpg';}
