javascript - 从像素数据数组中绘制图像

Question

如果我在 JavaScript 中有一组像素数据，是否有一种在 HTML 页面上显示它的好方法？

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

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

score 3 · Accepted Answer

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

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

score 2 · Accepted Answer

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

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

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

score 0 · Accepted Answer

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

score -1 · Accepted Answer

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

4 回答 4