从像素数据数组绘制图像

Question

如果我有 JavaScript 中的像素数据数组，有没有好的方法将其显示在 HTML 页面上？

• 在最新版本的 Safari 和 Firefox 上，我可以创建一个

  <canvas>

  元素并使用

  putImageData

  显示像素，但理想情况下，解决方案也可以在旧版本上运行，更重要的是，可以在 Internet Explorer 上运行。
• 另一个看起来更具体的解决方案可能是将像素编码为标准图像格式，并使用像素创建一个

  data:

  URI，并将其设置为

  src

  元素的

  <img>

  。不幸的是，似乎大多数图像格式都很复杂，我很难找到一种可以完成这项工作的简单格式（BMP 看起来是一种可能，但不适用于 Safari）。此外，IE 8 之前的 Internet Explorer 版本根本不支持

  data:

  URI。

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

data:

URI 的功能？

Answer 1

Canvas 是一个很好的解决方案，对于跨浏览器的支持请参阅Mark Pilgrim 的优秀教程。具体来说，“IE 怎么样？”部分并使用 ExplorerCanvas。您可以通过画布使用和创建 PNG 和 JPEG 格式的

data:

URI。

Answer 2

PNG 格式适合您的目标吗？如果是这样，PNGlib看起来相当不错。

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

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

Answer 3

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

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

Answer 4

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

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