Canvas is not origin-clean.

最新推荐文章于 2022-10-31 15:14:01 发布

向日葵

最新推荐文章于 2022-10-31 15:14:01 发布

阅读量590

点赞数

分类专栏： canvas 文章标签：前端 canvas

本文链接：https://blog.csdn.net/hb_zhouyj/article/details/123497198

版权

canvas 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

1、绘图安全机制的原理
canvas有origin-clean标志位，默认为true
如果使用了drawImage()绘制了其他域的图像，origin-clean会变成false
如果在origin-clean: false的canvas上调用toDataURL()、getImageData()、captureStream()方法，浏览器将会报错SECURITY_ERR

2、关于这个问题，MDN 上也有描述：

The canvas's bitmap is not origin clean; at least some of its contents have or may have been loaded from a site other than the one from which the document itself was loaded.

解决这个问题核心思路是解决图片的跨域问题。

let image = new Image();
image.crossOrigin = 'anonymous';
image.addEventListener('load', () => {
    // image load success
});
image.addEventListener('error', () => {
   // image load error
});
image.src = src;

注：图片服务器必须支持跨域访问。

参考：

canvas 导出图片时的安全问题处理

canvas-图像绘制的安全问题