Uncaught SecurityError: Failed to execute ‘toDataURL‘ on ‘HTMLCanvasElement‘: Tainted canvases may

当代词圣李白

于 2021-07-17 09:11:10 发布

阅读量4.5k

点赞数

分类专栏：日常踩坑疑难杂症文章标签： canvas

本文链接：https://blog.youkuaiyun.com/qq_32486011/article/details/118851692

版权

疑难杂症同时被 2 个专栏收录

23 篇文章

订阅专栏

日常踩坑

18 篇文章

订阅专栏

本文介绍了画布(canvas)使用跨域图片时发生污染的问题及安全措施。污染后的画布无法通过getImageData()等方法获取图像数据，以防止未经授权的数据泄露。文章提供了设置图片crossOrigin属性为Anonymous的方法来解决这一问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一旦您将未经 CORS 批准从其他来源加载的任何数据绘制到画布中，画布就会被污染。受污染的画布不再被认为是安全的，任何从画布取回图像数据的尝试都将导致抛出异常。
在受污染的画布上调用以下任何一个都会导致错误：

调用getImageData()画布的上下文
调用toBlob()上的元素本身
toDataURL()在画布上调用
当画布被污染时尝试任何这些都会导致SecurityError抛出。这可以防止用户在未经许可的情况下使用图像从远程网站提取信息而暴露私人数据。

以上信息来自mozila

大概的意思就是，画布(canvas)用了，来自跨域站点的图片，被污染了。
举例场景，
在这里插入图片描述

下面文件部分是一个canvas
章是来自跨域站点的图片，

解决方法

Img = new Image();  // 章的图片
Img .crossOrigin = "Anonymous";  // 加这句
Img .src = 'http://xxx.png'; 
var canvas = document.getElementById('canvas');
var context = canvas.getContext("2d");
context.drawImage(Img , x,y,15,15);