本文介绍 了解 锁canvas导出图片跨域的N种姿势小结，分享给大家，具体如下：
Uncaught DOMException: F ai led to execute 'toDataURL' on 'HT ML CanvasElement': Tainted canvases may not be export ed.
上面这个错误相信大家用canvas执行 toDataUrl导出图片的时候都遇到过，图片 服务器 域名和当前不一样，因为安全策略不允许跨域导出图片
解决这个跨越问题方式有多种
一 、将图片转换成base64
图片变成base64就没有域名一说了，自然不存在跨域
注意：图片转换成base64加增加图片文件大小，如果图片比 较大 ，不建议转换base64，否则会增加网页加载时间，影响网站速度，这种方式一般适用于小图
二、 图片服务器设置允许跨域
即请求图片返回的响应头中带有 Access-Control-Allow-Ori gin 切值为 *（允许所有网站跨域请求） 或者 当前 网站域名 （只允许固定域名下跨域请求）, 然后前端在加载图片是设置图片跨域属性 img .crossOrigin="anonymous"。 具体代码如下
VAR canvas = document.getElementById('myCanvas')
var ctx = canvas.getContext('2d')
var img = document.createElement('img')
img.crossOrigin="anonymous"
img.src = 'https://p4-q.mafengwo.net/s12/M00/CA/3B/wKgED1w8fL6ADk16AAXyDaz2bdU61.j PE g'
img.onload = function() {
ctx.drawImage(img,0,0,500,300);
console. LOG (canvas.toDataURL())
}
这样前后结合跨域问题便迎刃而解
三、把图片放到当前域名下
原谅我不厚道的笑了，这的确是一种可以解决问题。
BUT 实际项目中图片一般都存储在cdn上，所以这种方式不太现实& # 12 777 0;🌝🌞
图片变成base64就没有域名一说了，自然不存在跨域
四、当图片服务没法设置跨域响应头时
确实有这种情况，比如获取第三方网站的 头像 ，比如微信头像，然后前端动态生成新的图片，微信头像图片不允许跨域导出，怎么办？？？ 上面的 几种 方式都不好使
这种情况需要 后端 协助了，后端做一层转发，服务端获取头像，转换成base64返回前端，或者存储到本地允许跨域的服务器上，生产一个新的图片链接，返回给前端，这个时候结合方法一或者方法二，跨域问题也自然解决
如果你用的htmlToCanvas插件导出图片的话，则需要添加useCORS: true配置项,原理跟方法二一样,当然前置条件是图片域名允许跨域
至此我所 知道 的N中方式介绍完毕了，欢迎补充
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
总结
以上是 为你收集整理的 解锁canvas导出图片跨域的N种姿势小结 全部内容，希望文章能够帮你解决 解锁canvas导出图片跨域的N种姿势小结 所遇到的问题。
如果觉得 网站内容还不错， 推荐好友。
查看更多关于解锁canvas导出图片跨域的N种姿势小结的详细内容...