来自本地图像的谷歌浏览器污染的画布答案

【问题标题】：Google Chrome tainted canvas from local images来自本地图像的谷歌浏览器污染的画布
【发布时间】：2017-01-20 09:50:54
【问题描述】：

我正在尝试使用 html 5 画布元素制作一个普通的 JavaScript 游戏，为了制作基于颜色的命中框，我需要从画布上的某些位置获取图像数据。每当我使用 getImageData() 时，都会收到此错误：

未捕获的安全错误：无法在“CanvasRenderingContext2D”上执行“getImageData”：画布已被跨域数据污染。

画布上显示的所有图像都是从本地文件中提取的。有什么办法可以让它在 Chrome 上运行？

我通过在页面上放置html图像标签并使用context.drawImage(*img id, x, y*);来绘制图像

【问题讨论】：

【解决方案1】：

启动本地服务器可能是更好的方法。 Chrome 也很安全。

cd path/to/files
python -m SimpleHTTPServer

将浏览器指向

http://localhost:8000

【讨论】：

【解决方案2】：

将Image转换为Base64，然后使用它的图像标签，这将在不更改任何安全设置的情况下解决它

【讨论】：

【解决方案3】：

它是CORS。您可以使用 --allow-file-access-from-files 启动 chrome 以用于开发目的，然后从托管站点的同一服务器加载文件，这样就没有问题了。请注意，此标志会更改 chrome 的安全设置。

【讨论】：