canvas 图片跨域,canvas跨域引入图片

　　本文介绍跨域解锁画布导出图片的N种姿势总结，分享给大家，如下：

　　未捕获的DOMException:未能对“HTMLCanvasElement”执行“toDataURL”:受污染的画布可能无法导出。

　　以上错误相信大家在toDataUrl使用canvas导出图片时都遇到过。图片服务器的域名与当前域名不同，因为安全策略不允许跨域导出图片。

　　解决这个跨越问题方式有多种

　　一 、将图片转换成base64

　　当镜像变成base64，就没有域名了，自然就没有跨域了。

　　注意：将图像转换为base64会增加图像文件的大小。如果图片比较大，不建议转换成base64，否则会增加网页加载时间，影响网站速度。这种方法通常适用于小图像。

　　二、 图片服务器设置允许跨域

　　即请求图片返回的响应头有*的Access-Control-Allow-Origin的截止值(允许所有网站跨域请求)或当前网站域名(只允许固定域名下的跨域请求)，然后前端在加载图片时设置图片跨域属性img.crossOrigin=anonymous 。具体代码如下

　　var canvas=document . getelementbyid( my canvas )var CTX=canvas . get context( 2d )var img=document . createelement( img )img . cross origin= anonymous img . src= https://P4-q . mafengwo . net/S12/M00/CA/3B/wk ged 1 w8 fl 6 ad 16 a axydaz 2 bdu 61 . JPEG img . onload=function(){ CTX . draw image(img，0，500控制台。日志(画布。todataurl ())}这样就可以解决跨域问题了。

　　三、把图片放到当前域名下

　　原谅我不友善的微笑，这真的是解决问题的方法。

　　但是实际项目中的图片一般都存储在cdn上，所以这种方式不太现实。

　　当镜像变成base64，就没有域名了，自然就没有跨域了。

　　四、当图片服务没法设置跨域响应头时

　　事实确实如此。比如获取第三方网站的头像，比如微信头像，然后前端动态生成新的图片。微信头像图片不允许跨域导出。我该怎么办？以上方法都不好用。

　　在这种情况下，后端需要后端的协助。后端做一层转发，服务器获取头像，转换成base64返回前端，或者存储在本地跨域服务器上产生新的图片链接返回前端。这时，结合方法1或方法2，自然会解决跨域问题。

　　如果使用htmlToCanvas插件导出图片，需要添加useCORS: true配置项。原理和方法2一样。当然前提条件是图片的域名是允许跨域的。

　　至此，我所知道的N种方式介绍完毕。欢迎补充。

　　这就是本文的全部内容。希望对大家的学习和支持有帮助。

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