解锁canvas导出来照片跨域的N种姿态小结

本文详细介绍掌握锁canvas导出来照片跨域的N种姿态小结，共享给大伙儿，实际以下：

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

上面这个不正确坚信大伙儿用canvas实行 toDataUrl导出来照片的情况下都遇到过，照片服务器网站域名和当今不1样，由于安全性对策不容许跨域导出来照片

处理这个超越难题方法有多种多样

1 、将照片变换成base64

照片变为base64就沒有网站域名1说了，当然不存在跨域

留意：照片变换成base64加提升照片文档尺寸，假如照片较为大，不提议变换base64，不然会提升网页页面载入時间，危害网站速率，这类方法1般可用于小图

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、把照片放到当今网站域名下

谅解我不良心的笑了，这确实是1种能够处理难题。

BUT 具体新项目中照片1般都储存在cdn上，因此这类方法不太实际🌚🌝🌞

照片变为base64就沒有网站域名1说了，当然不存在跨域

4、当照片服务无法设定跨域回应头时

的确有这类状况，例如获得第3方网站的头像，例如手机微信头像，随后前端开发动态性转化成新的照片，手机微信头像照片不容许跨域导出来，如何办？？？ 上面的几种方法都不太好使

这类状况必须后端开发帮助了，后端开发做1层转发，服务端获得头像，变换成base64回到前端开发，或储存到当地容许跨域的服务器上，生产制造1个新的照片连接，回到给前端开发，这个情况下融合方式1或方式2，跨域难题也当然处理

假如你用的htmlToCanvas软件导出来照片的话，则必须加上useCORS: true配备项,基本原理跟方式21样,自然外置标准是照片网站域名容许跨域

至此我所了解的N中方法详细介绍结束了，欢迎填补

以上便是本文的所有內容，期待对大伙儿的学习培训有一定的协助，也期待大伙儿多多适用脚本制作之家。