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

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

Uncaught DOMException: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported.

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

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

一 、将图片转换成base64

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

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

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

即请求图片返回的响应头中带有Access-Control-Allow-Origin切值为 *（允许所有网站跨域请求）或者当前网站域名（只允许固定域名下跨域请求）, 然后前端在加载图片是设置图片跨域属性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.jpeg'  img.onload = function() {    ctx.drawImage(img,0,0,500,300);    console.log(canvas.toDataURL())  }

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

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

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

BUT 实际项目中图片一般都存储在cdn上，所以这种方式不太现实
注：相关教程知识阅读请移步到HTML教程频道。