详解DataURL()报错的解决方案全都在这了

详解DataURL（）报错的解决⽅案全都在这了报错详尽信息

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

关键词

移动式卫生间

crossOrigin

Access-Control-Allow-Origin

前⾔

最近在做⼀个创意类的图⽚合成⼯具，⼤概齐就是通过拼接⾃定义的⽂字和图⽚信息⽣成⼀张商品图⽚类似的功能，项⽬中⽤到了fabric.js这个画板库，最后⼀步在保存图⽚的时候报上⾯的⼀长串错误，墙内墙外搜了⼀遍，给出的解决⽅案都不全⾯，为避免同学们再次踩坑，于是有了此⽂

正⽂

我们在convertDOM2Image时，如果DOM内存在图⽚资源，该资源所在的web-server是不⽀持跨域的，保存图⽚是不会成功的。

因此在排查问题时，⾸先要确定

web-server是否允许跨域，我们以nginx为例，response-header内要存在Access-Control-Allow-Orgin:xxxx(可以是*，安全性要求⽐较⾼的可以根据主域名⾃定义)

如果是img标签, 是否添加了crossorigin="anonymous", 如果是Image对象，同样是否添加了改属性

如果还不⾏，这⾥先不把答案放出来，我们先看看栗⼦

在接下来的栗⼦中我们会⽤到将Image转换为canvas对象的⽅法

function convertImageToCanvas(image) {

无胆饮水机

// 创建canvas DOM元素，并设置其宽⾼和图⽚⼀样

let canvas = ateElement("canvas");

canvas.width = image.width;

canvas.height = image.height;

// 我们在实际的开发中，需要将抓换后的base64图⽚编码传输到后台图⽚服务器，由server直接存储或者⽣成⼀张图⽚；

// 所以会⽤到 toDataURL

console.DataURL('image/jpeg'))

return canvas;

}

栗⼦1

本地未设置跨域允许选项crossorigin=anonymous,web-server未设置跨域允许选项

<p>本地未设置跨域允许选项crossorigin=anonymous,web-server未设置跨域允许选项</p>

</div>

<button onclick="setCanvas('d1')">canvas保存</button>

function setCanvas(DOMID) {

柴火灶

let img = ElementById(DOMID).querySelector('img')

document.body.appendChild(convertImageToCanvas(img))

}

很显然，报错

栗⼦2

本地标签内设置跨域允许选项, web-server未设置跨域允许选项

文字拼接

这次连图⽚都出不来，直接报错

这个好理解，浏览器限制嘛

Access to image at 'xxxx' (redirected from 'xxxx') from origin 'null' has been blocked by CORS policy: No 'Access-

Control-Allow-Origin' header is present on the requested resource.

栗⼦3

本地未设置跨域允许选项crossorigin=anonymous, web-server设置跨域允许选项

报错，妥妥的。

栗⼦4

本地标签内设置跨域允许选项crossorigin=anonymous, web-server设置跨域允许选项

<img src="img.alicdn/tfs/TB1_uT8a5ERMeJjSspiXXbZLFXa-143-59.png" alt="" crossorigin="anonymous"> <p>本地设置跨域允许选项`crossorigin=anonymous`,`web-server`设置跨域允许选项</p>

</div>

<button onclick="setCanvas('d4')">canvas保存</button>

居然可以了，但是~如果在代码内设置跨域呢？

栗⼦5

function setCanvas(DOMID) {

let img = ElementById(DOMID).querySelector('img')

document.body.appendChild(convertImageToCanvas(img))

}

报错

我看的意思是必须同步设置crossOrigin=anonymous，该图⽚凭证才会被信任

This means that CORS is enabled and credentials are sent if the image is fetched from the same origin from which the document was loaded.

否则缓存的图像数据仍然会被画布视为有污染的跨源内容.

怎么办？重新取⼀遍图⽚呗，加个随机数，图⽚还是那个图⽚，不过加了个马甲，浏览器就不认识了

栗⼦6

function setCanvas(DOMID) {

let img = ElementById(DOMID).querySelector('img')

img.src =img.src+'?v='+Math.random()

document.body.appendChild(convertImageToCanvas(img))

}

binggo, 完美解决

所以我们在开发过程中，新建图⽚，更换图⽚，还原图⽚等功能代码内，最好每⼀次都加个随机数，以保证源都是最新的，不⾛缓存

多说⼀点吧，关于fabric.js的相关跨域配置见下⽅

let _fabricConfig = {

// ....

crossOrigin:'anonymous'

};

/* fabric对象 */

let _fabricObj = new fabric.Canvas(id, _fabricConfig);

偏心轮机构

// 新建图⽚对象时

let imgInstance = new fabric.Image.fromURL(url + '?v='+ Math.random(), img => {}, {crossOrigin: 'anonymous'})

// 动态更新图⽚时

let currentActive = _ActiveObj();

currentActive.setSrc(randomURL, img =>{}, {crossOrigin: 'anonymous'})

到此这篇关于详解DataURL()报错的解决⽅案全都在这了的⽂章就介绍到这了，更多相关DataURL()报错内容请搜索以前的⽂章或继续浏览下⾯的相关⽂章，希望⼤家以后多多⽀持！

本文发布于:2024-09-23 14:26:30，感谢您对本站的认可！

本文链接：https://www.17tex.com/tex/4/344636.html

上一篇：2022年第五届蓝桥杯大赛软件类C-CC组全国总决赛真题

下一篇：七年级信息技术复习题

标签：跨域设置允许选项报错开发解决后台

留言与评论（共有 0 条评论）