从像素数据数组绘制图像
如果我有 JavaScript 中的像素数据数组,有没有好的方法可以将其显示在 HTML 页面上?
- 在最新版本的 Safari 和 Firefox 上,我可以创建一个
元素并使用
putImageData
来显示像素,但理想情况下,解决方案也可以在旧版本上运行更重要的是,可以在 Internet Explorer 上工作。 - 另一个似乎更具体的解决方案是将像素编码为标准图像格式,并使用像素创建一个
data:
URI,并将其设置为src
的> 元素。不幸的是,似乎大多数图像格式都很复杂,我很难找到一种可以完成这项工作的简单格式(BMP 看起来是一种可能,但不适用于 Safari)。此外,IE 8 之前的 Internet Explorer 版本根本不支持data:
URI。
我怀疑是否存在,但是有人知道可以生成标准格式图像的 JavaScript 图像库吗?有没有办法在 IE 7 中复制 data:
URI 的功能?
If I have an array of pixel data in JavaScript, is there a good way to display it on an HTML page?
- On recent versions of Safari and Firefox, I can make a
<canvas>
element and useputImageData
to display the pixels, but ideally a solution could work on older versions as well and more importantly, work on Internet Explorer. - Another solution which seems more tangible could be to encode the pixels into a standard image format and create a
data:
URI with the pixels and set that as thesrc
of an<img>
element. Unfortunately, it seems like most image formats are complex and I'm having a hard time finding a simple one that can do the job (BMP looks like a possibility but does not work on Safari). Also, versions of Internet Explorer before IE 8 don't supportdata:
URIs at all.
I doubt any exist, but does anyone know of image libraries for JavaScript that can generate image in a standard format? Is there a way to replicate the functionality of a data:
URI in IE 7?
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(4)
Canvas 是一个很好的解决方案,对于跨浏览器支持请参见 Mark Pilgrim 的精彩教程。具体来说,“IE 怎么样?”部分并使用 ExplorerCanvas。您可以通过画布使用和创建 PNG 和 JPEG 格式的
data:
URI。Canvas is a good solution, for-cross browser support see Mark Pilgrim's excellent tutorial. Specifically, the "What about IE?" section and using ExplorerCanvas. You can use and create
data:
URIs in the PNG and JPEG formats with canvas.PNG 格式适合您的目标吗?如果是这样 PNGlib 看起来很漂亮好的。
另外, JS JPEG Encoder 看起来不错,但它以 Canvas 的返回值作为输入。 getImageData().
但不知道你能做些什么来支持 IE 7。
Does PNG format work for your targets? If so PNGlib looks pretty good.
Also, JS JPEG Encoder looks good but it takes as input the returned value of Canvas.getImageData().
Don't know what you can do to support IE 7 though.
检查一下拉斐尔
- http://raphaeljs.com/
虽然这可能很慢,而且这不是该库的预期用途,它将支持您感兴趣的浏览器。
Check you Raphaël
- http://raphaeljs.com/
While this may be slow, and it is not the intended use of the library, it will work with support for browsers you're interested in.
也许看看 fxCanvas http://burzak.com/pro/fxcanvas/
我认为他们甚至实现了使用 Flash 在 IE 中“putImageData”。
Maybe check out fxCanvas http://burzak.com/pro/fxcanvas/
I think they implement even ‘putImageData‘ in IE using Flash.