Canvas getImageData()在从文件:// URI绘制图像后-需要解决所有浏览器



我是Construct 2的开发者,这是一款面向Windows的HTML5游戏编辑器。网址:http://www.scirra.com

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

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

然而,大多数浏览器阻止您使用getImageData()来获取从磁盘加载的任何图像的像素。我已经尝试将所有必要的图像文件放在子目录中,正如MDN在其对file://访问策略的描述中所建议的那样。这也不行!

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

还有,为什么这个安全策略是必要的?这似乎有点过头了,使得像我们这样的应用程序很难编写。

感谢您的帮助。

你的名字听起来很熟悉。

虽然这让很多人感到不安,但在规范中这一点现在已经很明确了。http://file://是不同的原点,任何试图把一个放在另一个上的东西都会弄脏原点。正如你所注意到的,文件uri本身有自己的一套规则,这使得事情变得更加棘手。

在画布上画一个原点不同的东西?可惜的是,从此以后origin-clean标志为假,这将禁止您做各种事情。

这些东西的完整列表在这里的规范中。

但我相信你现在都知道了。你想绕过它。

我建议你不要强迫浏览器使用它,而是捆绑一些轻量级的web服务,这样所有的东西都来自同一个来源。这将在未来造成更少的头痛。

您可能需要类似Python SimpleHTTPServer的东西。但是这个决定实际上取决于你的产品在这一点上已经包含了什么。

相关内容

最新更新