jQuery 下载 canvas 图片,前端canvas生成图片

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

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

　　a href=图片src 下载=下载海报下载海报/a但是通过测试，发现再旅行队中，下载的文件不能带上拓展名，所以只好换一个思路，使用帆布进行处理。

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

　　img.crossOrigin= anonymous2。使用今天陶尔把图片转换成base64格式

　　canvas.toDataURL(image/png)3 .使用模拟点击事件，触发下载

　　var save _ link=document。createelement( a )；save _ link . href=image save _ link . download=测试. png ；var click事件=文档。创建事件(“鼠标事件”)；clickevent.initEvent(click ，true，false)；保存_链接。调度事件(点击事件)；完整代码：

　　var canvas=$( .canvas’)；var cxt=canvas[0].获取上下文(“2d”)；函数save(){ var img=new Image()；img.crossOrigin= anonymousimg。onload=function(){ var _ w=img。自然宽度；var _ h=img . naturalheightccanvas . attr({ width:_ w，height:_ h })；cxt.drawImage(img，0，0)；var image=canvas[0].toda aurl( image/png )var save _ link=document。createelement( a )；save _ link . href=image save _ link . download=测试. png ；var click事件=文档。创建事件(“鼠标事件”)；clickevent.initEvent(click ，true，false)；保存_链接。调度事件(点击事件)；};img。src= http://n。新浪img。cn/sports/transform/2017 08 25/nzi 3-fykiufe 6650492。jpg ；}以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。