一旦您将未经 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);