从像素数据数组中绘制图像答案

【问题标题】：Draw image from pixel data arrays从像素数据数组中绘制图像
【发布时间】：2010-06-23 00:14:33
【问题描述】：

如果我在 JavaScript 中有一个像素数据数组，有没有一种好方法可以在 HTML 页面上显示它？

在最新版本的 Safari 和 Firefox 上，我可以创建一个 <canvas> 元素并使用 putImageData 显示像素，但理想的解决方案也适用于旧版本，更重要的是，适用于 Internet Explorer。
另一个似乎更切实可行的解决方案是将像素编码为标准图像格式，并使用像素创建一个data: URI，并将其设置为<img> 元素的src。不幸的是，似乎大多数图像格式都很复杂，我很难找到一个可以完成这项工作的简单格式（BMP 看起来很有可能，但在 Safari 上不起作用）。此外，IE 8 之前的 Internet Explorer 版本根本不支持 data: URI。

我怀疑是否存在，但有人知道可以生成标准格式图像的 JavaScript 图像库吗？有没有办法在 IE 7 中复制 data: URI 的功能？

【问题讨论】：

【解决方案1】：

Canvas 是一个很好的解决方案，对于跨浏览器的支持，请参阅 Mark Pilgrim 的优秀教程：

http://diveintohtml5.ep.io/canvas.html 特别是“IE怎么样？”部分并使用 explorercanvas。您可以使用和创建数据：带有画布的 png 和 jpeg 格式的 URI。

【讨论】：

【解决方案2】：

PNG 格式是否适用于您的目标？如果是这样PNGlib 看起来还不错。

另外，JS JPEG Encoder 看起来不错，但它会将 Canvas.getImageData() 的返回值作为输入。

不知道你可以做些什么来支持 IE 7。

【讨论】：

【解决方案3】：

检查你拉斐尔 - http://raphaeljs.com/

虽然这可能很慢，而且它不是库的预期用途，但它可以支持您感兴趣的浏览器。

【讨论】：

【解决方案4】：

也许看看 fxCanvas http://burzak.com/pro/fxcanvas/

我认为他们甚至使用 Flash 在 IE 中实现了“putImageData”。

【讨论】：