被跨域数据污染的画布 [英] Canvas tainted by cross-origin data

问题描述

我正在从我可以信任的第三方站点加载动画 jpeg.我正在尝试 getImageData() 但浏览器 (Chrome 23.0) 抱怨:

I'm loading a motion jpeg from third-party site, which I can trust. I'm trying to getImageData() but the browser (Chrome 23.0) complains that:

Unable to get image data from canvas because the canvas has been tainted by
cross-origin data.

SO 上有一些类似的问题，但他们使用的是本地文件，而我使用的是第三方媒体.我的脚本在共享服务器上运行，我不拥有远程服务器.

There are some similar questions on SO, but they are using local file and I'm using third party media. My script runs on a shared server and I don't own the remote server.

我尝试了 img.crossOrigin = 'Anonymous' 或 img.crossOrigin = ''(参见 关于 CORS 的 Chromium 博客上的这篇文章)，但它没有帮助.关于如何在具有跨域数据的画布上 getImageData 的任何想法?谢谢！

I tried img.crossOrigin = 'Anonymous' or img.crossOrigin = '' (see this post on the Chromium blog about CORS), but it didn't help. Any idea on how can I getImageData on a canvas with cross-origin data? Thanks!

推荐答案

crossOrigin 标志一旦被污染就无法重置，但如果您事先知道图像是什么，您可以将其转换为数据 url，请参阅 将图像从数据 URL 绘制到画布

You cannot reset the crossOrigin flag once it is tainted, but if you know before hand what the image is you can convert it to a data url, see Drawing an image from a data URL to a canvas

但是不，您不能也不应该使用来自不支持 CORS 的外部来源的 getImageData()

But no, you cannot and should not be using getImageData() from external sources that don't support CORS

这篇关于被跨域数据污染的画布的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！