解锁canvas导出图片跨域的N种姿式～

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

上面这个错误相信你们用canvas执行 toDataUrl导出图片的时候都遇到过，图片服务器域名和当前不同，由于安全策略不容许跨域导出图片

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

一 、将图片转换成base64

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

注意：图片转换成base64加增长图片文件大小，若是图片比较大，不建议转换base64，不然会增长网页加载时间，影响网站速度，这种方式通常适用于小图

2、 图片服务器设置容许跨域

即请求图片返回的响应头中带有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())
  }
复制代码

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

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

原谅我不厚道的笑了，这的确是一种能够解决问题。
BUT 实际项目中图片通常都存储在cdn上，因此这种方式不太现实🌚🌝🌞
复制代码

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

4、当图片服务无法设置跨域响应头时

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

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

若是你用的htmlToCanvas插件导出图片的话，则须要添加useCORS: true配置项,原理跟方法二同样,固然前置条件是图片域名容许跨域

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