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

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

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

以上信息来自mozila

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

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

解决方法

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);
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值