从像素数据阵列中绘制图像

时间:2010-06-23 00:14:34

标签: javascript image canvas pixel data-url

如果我在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的功能?

4 个答案:

答案 0 :(得分:3)

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

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

答案 1 :(得分:2)

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

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

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

答案 2 :(得分:0)

检查你Raphaël - http://raphaeljs.com/

虽然这可能很慢,并且它不是图书馆的预期用途,但它可以支持你感兴趣的浏览器。

答案 3 :(得分:-1)

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

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