关于Canvas中的"The canvas has been tainted by cross-origin data"跨域问题
2017-09-11 22:46
1726 查看
在学习Html5中的Canvas的使用“图像”部分,用到getImageData方法获取图片信息,代码如下:
浏览器会报如下图所示的错误:
谷歌浏览器报代码的第41行错误,即“var d = c.getImageData(0,0,300,300);”这句代码有问题。
“Uncaught
DOMException: Failed to execute 'getImageData' on 'CanvasRenderingContext2D': The canvas has been tainted by cross-origin data. at HTMLImageElement.img.onload”,字面翻译为“未能执行‘getImageData‘方法,由于这个canvas已经被污染了”。在翻阅《火狐开发者文档》时,发现有提到这么一段话,“在 HTMLImageElement上使用crossOrigin属性,你可以请求加载其它域名上的图片。如果图片的服务器允许跨域访问这个图片,那么你可以使用这个图片而不污染canvas,否则,使用这个图片将会污染canvas”。
而上文中出现问题的图片是存放在本地的,本地的图片默认是没有域名的,所以浏览器都认为你是跨域,导致报错。
所以,问题就很好解决了,将图片放在服务器中,即通过服务器运行该网页,操作结果如下:
果然没有再报上面那个错了。
另外,用火狐浏览器打开不会出现这个问题。
在解决这个问题百度的时候,看到有朋友这样解决问题,修改谷歌浏览器的“属性”->"目标"的值,在其末尾添加“ --disable-web-security”,再重启浏览器。。。我在想办法解决这个问题时,也试着使用该方法去尝试解决,发现并没什么用。故我想改浏览器启动参数只是让自己电脑支持而已,解决不了真正的跨域问题。
浏览器会报如下图所示的错误:
谷歌浏览器报代码的第41行错误,即“var d = c.getImageData(0,0,300,300);”这句代码有问题。
“Uncaught
DOMException: Failed to execute 'getImageData' on 'CanvasRenderingContext2D': The canvas has been tainted by cross-origin data. at HTMLImageElement.img.onload”,字面翻译为“未能执行‘getImageData‘方法,由于这个canvas已经被污染了”。在翻阅《火狐开发者文档》时,发现有提到这么一段话,“在 HTMLImageElement上使用crossOrigin属性,你可以请求加载其它域名上的图片。如果图片的服务器允许跨域访问这个图片,那么你可以使用这个图片而不污染canvas,否则,使用这个图片将会污染canvas”。
而上文中出现问题的图片是存放在本地的,本地的图片默认是没有域名的,所以浏览器都认为你是跨域,导致报错。
所以,问题就很好解决了,将图片放在服务器中,即通过服务器运行该网页,操作结果如下:
果然没有再报上面那个错了。
另外,用火狐浏览器打开不会出现这个问题。
在解决这个问题百度的时候,看到有朋友这样解决问题,修改谷歌浏览器的“属性”->"目标"的值,在其末尾添加“ --disable-web-security”,再重启浏览器。。。我在想办法解决这个问题时,也试着使用该方法去尝试解决,发现并没什么用。故我想改浏览器启动参数只是让自己电脑支持而已,解决不了真正的跨域问题。
相关文章推荐
- "Unable to get image data from canvas because the canvas has been tainted by cross-origin data"问题产生原因及解决办法
- "Unable to get image data from canvas because the canvas has been tainted by cross-origin data"问题产生原
- 解决方法!:getImageData on 'CanvasRenderingContext2D': The canvas has been tainted by cross-origin data.
- 两种方法解决 "The License CNEKJPQZEX- has been cancelled..." 问题
- Work around by " Due to heavy load, the latest workflow operation has been queued. "
- Visual studio 2013打开报异常"Exception has been thrown by the target of an invocation"
- 关于继承parent="Theme.AppCompat"错误:This Activity already has an action bar supplied by the window decor
- Unity关于 "Move" can only be called on an active agent that has been placed on a NavMesh.问题的解决办法
- "No 'Access-Control-Allow-Origin' header is present on the requested resource" 问题
- 关于ARCGIS the system clock has been set back more than 24 hours的问题(转载自ESRI资源)
- 解决SharePoint 文档库itemadded eventhandler导致的上传完成后,编辑页面保持报错的问题,错误信息为“该文档已经被编辑过 the file has been modified by...”
- 关于LinerrLayout问题,总是出现"LinearLayout" must be followed by the ' = ' character.
- 问题:The certificate used to sign "XXX" has either expired or has been revoked
- "EIPAbstractError" exception with "No peer with the interface with guid [...] has been registered".
- 关于" MySQL server has gone away"的问题
- 关于 "the serializable class XXX does not declare a static final seriaVersionUID..."的问题
- C#解决微信支付Exception has been thrown by the target of an invocation(调用的目标发生了异常)的问题
- 跨域错误问题has been blocked by cors policy
- Fedora 17 下运行Kettle遇到"A fatal error has been detected by the Java Runtime Environment"
- source insight Confirm by typing ‘yes' below"、"has been changed outside of the editor. Do you want to reload the file?"、“