解锁canvas导出图片跨域的N种姿势小结

本文介绍了解锁canvas导出图片跨域的n种姿势小结，分享给大家，具体如下：

uncaught domexception: failed to execute ‘todataurl’ on ‘htmlcanvalement’: tainted canvas may not be exported.

上面这个错误相信大家用canvas执行 todataurl导出图片的时候都遇到过，图片服务器域名和当前不一样，因为安全策略不允许跨域导出图片

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

一 、将图片转换成ba64

图片变成ba64就没有域名一说了，自然不存在跨域

注意：图片转换成ba64加增加图片文件大小，如果图片比较大，不建议转换ba64，否则会增加网页加载时间，影响网站速度，这种方式一般适用于小图

一句话退休感言二、 图片服务器设置允许跨域

即请求图片返电影非诚勿扰回的响应头中带有access-control-allow-origin切值为 *（允许所有网站跨域请求）或者当前网站域名（只允许固定域名下跨域请求）, 然后前端在加载图片是设置图片跨域属性img.crossorigin="anonymous"。具体代码如下

  var canvas = document.getelementbyid('mycanvas')  var ctx = canvas.getcont洗衣机尺寸大全ext('2d')  var img = document.createelement('img')  img.crossorigin="anonymous"  img.src = 'https://p4-q.mafengwo.net/s12/m00/ca/3b/wkged1w8fl6adk16aaxydaz2bdu61.jpeg'  img.onload = 双汇冷鲜肉加盟function上中下结构() {    ctx.drawimage(img,0,0,500,300);    console.log(canvas.todataurl())  }

这样前后结合跨域问题便迎刃而解

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

原谅我不厚道的笑了，这的确是一种可以解决问题。

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

图片变成ba64就没有域名一说了，自然不存在跨域

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

确实有这种情况，比如获取第三方网站的头像，比如微信头像，然后前端动态生成新的图片，微信头像图片不允许跨域导出，怎么办？？？ 上面的几种方式都不好使

这种情况需要后端协助了，后端做一层转发，服务端获取头像，转换成ba64返回前端，或者存储到本地允许跨域的服务器上，生产一个新的图片链接，返回给前端，这个时候结合方法一或者方法二，跨域问题也自然解决

如果你用的htmltocanvas插件导出图片的话，则需要添加ucors: true配置项,原理跟方法二一样,当然前置条件是图片域名允许跨域

至此我所知道的n中方式介绍完毕了，欢迎补充

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持www.887551.com。