The canvas has been tainted by cross-origin data

HTML5 梦想屋 2020-9-29 1840 0

在前端调试canvas时，出现下面这个错误：

Uncaught DOMException: Failed to execute 'getImageData' on 'CanvasRenderingContext2D': The canvas has been tainted by cross-origin data.
    at getImage (http://canvas/:400:39)
    at Image.localTest (http://canvas/:351:9)

字面翻译为“未能执行‘getImageData‘方法，由于这个canvas已经被污染了”。在翻阅《火狐开发者文档》时，发现有提到这么一段话，“在 HTMLImageElement上使用crossOrigin属性，你可以请求加载其它域名上的图片。如果图片的服务器允许跨域访问这个图片，那么你可以使用这个图片而不污染canvas，否则，使用这个图片将会污染canvas”。
而上文中出现问题的图片是存放在本地的，本地的图片默认是没有域名的，所以浏览器都认为你是跨域，导致报错。

另外，用火狐浏览器打开不会出现这个问题。
在解决这个问题百度的时候，看到有朋友这样解决问题，修改谷歌浏览器的“属性”->"目标"的值，在其末尾添加“ --disable-web-security”，再重启浏览器。。。我在想办法解决这个问题时，也试着使用该方法去尝试解决，发现并没什么用。故我想改浏览器启动参数只是让自己电脑支持而已，解决不了真正的跨域问题。

getImageData canvas跨域 canvas Canvas 谷歌浏览器 http html 浏览器 oss SSO 跨域谷歌重启错误 IT

The canvas has been tainted by cross-origin data

您可能还会对下面的文章感兴趣：

相关文章