全国服务热线:4008-888-888

技术知识

解锁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中方法详细介绍结束了,欢迎填补

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



在线客服

关闭

客户服务热线
4008-888-888


点击这里给我发消息 在线客服

点击这里给我发消息 在线客服