如何将图像直接绘制到 ImageData 数组 - HTML5/Javascript答案

【问题标题】：How to draw an image directly to an ImageData array - HTML5/Javascript如何将图像直接绘制到 ImageData 数组 - HTML5/Javascript
【发布时间】：2012-02-16 13:50:44
【问题描述】：

我的问题：
我正在制作一个 HTML5 游戏，并试图通过绘制一次背景而不是每帧都重绘它来加快速度。
为此，我在画布上绘制了背景，然后尝试从中获取 ImageData。不幸的是，我被安全错误阻止了。无法，因为图片来自外部来源。
我对此进行了研究，似乎这是一个“功能”，可以阻止坏人从用户的硬盘中窃取内容。虽然我加载的这些图像不是来自硬盘。

我真的很想能够加快我的游戏速度。是否有解决安全错误的解决方案，或者甚至可以将图像直接加载到图像数据中，以便我可以通过循环像素进行绘制？

（注意：我不想弄乱多个画布来完成工作）

谢谢，甘

【问题讨论】：

标签： javascript image html canvas

【解决方案1】：

没有办法解决这个问题，尽管您可以从另一个域中绘制图像，但在这种情况下使用getImageData 总是会引发安全错误。这是为了防止窃取敏感信息，因为网站可以生成包含基于 cookie 或 IP 地址的私人用户信息的动态图像。但是，您可以简单地使用服务器端脚本来代理图像。

但老实说getImageData 和putImageData 相当慢，我不明白这如何能加快你的游戏速度。在我看来，您认为绘制图像数据比简单地使用drawImage 更快，它不是。

如果你想让你的动画看起来不错，你必须重新绘制所有东西，这就是动画的工作方式。

【讨论】：

我明白了。嗯。我只是在想绘制 704 个单独的 44x44 图像会比绘制单个 968x748 图像数据慢。我不知道。你能想到其他提高效率的方法吗？
哦，在这种情况下，我建议您使用服务器端脚本来代理图像，但与其使用 getImageData，不如使用 canvas.toDataURL 创建一个 Image 对象并进行绘制它通常与drawImage。
有没有办法把图片数据转换成图片？
不需要使用图像数据，您可以在画布上绘制一次您的 704 图像，然后使用我之前说的 canvas.toDataURL() 方法将其全部转换为仅一张图像，但这会还会引发跨域图像的安全错误，因此需要代理它（或将其复制到您的服务器）
当然，只需使用 CSS 将主画布放在背景画布上，使用绝对位置或相对位置。请记住，您需要使用透明颜色清除主画布，以便背景画布显示。（使用 clearRect 方法）。但是请看，在这种情况下，最好只放置一个背景图像设置为重复的 div，而不是另一个画布作为背景，这样就不会出现跨域错误 :)