从file:// URI中绘制图像后的Canvas getImageData() - 需要所有浏览器的解决方法

时间:2011-07-15 16:44:21

标签: html5 canvas same-origin-policy getimagedata file-uri

我是Construct 2的开发者,这是一款适用于Windows的HTML5游戏编辑器。它位于http://www.scirra.com

最近,我一直在尝试添加一个功能,通过在画布上进行转换来修改图像。它非常简单 - 在画布上绘制一个图像并调用getImageData()来获取像素。

当用户在我们的应用程序中单击“预览”时,所有文件都将转储到磁盘上的临时文件中,并启动浏览器以显示它。上传到服务器不是预览的选项 - 有些游戏的大小是兆字节。

但是,大多数浏览器会阻止您使用getImageData()获取所有从磁盘加载的图像的像素。我已经尝试将所有必要的图像文件放在子目录中,正如MDN在其description of file:// access policies中所建议的那样。这也不起作用!

Chrome的--allow-file-access-from-files标志修复了它。但是,我需要支持所有主流浏览器。至少Internet Explorer和Firefox是否有类似的解决方法?我不知道Internet Explorer,我真的希望有一些东西不涉及在Firefox中手动进入about:config,否则我们会在支持请求中淹没,问“为什么它在Firefox中不起作用?!”。

另外,为什么这个安全策略是必要的?!?它似乎超越了顶层并使像我们这样的应用程序真的很难写。

任何帮助表示感谢。

1 个答案:

答案 0 :(得分:3)

你的名字在HN听起来很熟悉。

到目前为止,这在规范中已经相当粗糙,尽管这会让很多人感到不安。 http://file://是不同的起源,任何试图将一个放在另一个上的东西都会弄脏原点。正如你所指出的那样,文件uri本身就有自己的一套规则,使事情变得更加棘手。

将某些内容绘制到原点不相同的画布上?太糟糕了,此后起源 - 清洁标志是假的,然后不允许你做各种事情。

这些内容的完整列表位于规范here.

但我相信你现在知道这一切了。你想绕过它。

我建议使用ins而不是试图强化它周围的浏览器,你可以捆绑某种轻量级的Web服务,以便所有东西都来自同一个来源。它将来会减少很多麻烦。

你可能想要像Python SimpleHTTPServer这样的东西。但这个决定实际上取决于你现在已经包含在产品中的内容。