如何使用HTML和JavaScript显示原始图像数据？

Question

我有一个使用ajax的应用程序，其中PHP端向客户端javascript端发送来自相机的未编码原始图像数据。

我想通过使用img或canvas标签在html和javascript中显示图像。

图像数据是32×32无符号字符。

我想尽可能地实现我的目标（编码或其他所有操作），但我希望在客户端完成，因为我不能在服务器端处理任何其他操作。

我尝试将原始数据编码为jpeg或png数据，但没有成功。

我发布了一个不起作用的示例：

var encoder = new JPEGEncoder(9);
var jpgFile = encoder.encode(rawImage, 9);
document.getElementById("image").src = jpgFile;

jpgFile 就像是一个

data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAFk9Q05DOFlOSE5kXllphd6QhXp6hf/CzaHe//////////////////////////////////////////////////8BXmRkhXWF/5CQ///////////////////////////////////////////////////////////////////////////AABEIAAAAAAMBEQACEQEDEQH/xAGiAAABBQEBAQEBAQAAAAAAAAAAAQIDBAUGBwgJCgsQAAIBAwMCBAMFBQQEAAABfQECAwAEEQUSITFBBhNRYQcicRQygZGhCCNCscEVUtHwJDNicoIJChYXGBkaJSYnKCkqNDU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6g4SFhoeIiYqSk5SVlpeYmZqio6Slpqeoqaqys7S1tre4ubrCw8TFxsfIycrS09TV1tfY2drh4uPk5ebn6Onq8fLz9PX29/j5+gEAAwEBAQEBAQEBAQAAAAAAAAECAwQFBgcICQoLEQACAQIEBAMEBwUEBAABAncAAQIDEQQFITEGEkFRB2FxEyIygQgUQpGhscEJIzNS8BVictEKFiQ04SXxFxgZGiYnKCkqNTY3ODk6Q0RFRkdISUpTVFVWV1hZWmNkZWZnaGlqc3R1dnd4eXqCg4SFhoeIiYqSk5SVlpeYmZqio6Slpqeoqaqys7S1tre4ubrCw8TFxsfIycrS09TV1tfY2dri4+Tl5ufo6ery8/T19vf4+fr/2gAMAwEAAhEDEQA/AP8A/9k=

我在互联网上搜索得到了JPEGEncoder。

- Gappa

---

根据以下帖子，似乎您可以将“src”设置为原始数据。这篇文章对您有帮助吗？http://stackoverflow.com/questions/11027186/html-css-background-image-from-raw-image-data-not-url - Fizz

通常情况下，设置图像元素的.src属性应该是有效的（参见：http://stackoverflow.com/questions/11027186/html-css-background-image-from-raw-image-data-not-url）。你确定这是一个经过Base64流编码的响应吗？ - Nando

我已经尝试过这种方式，将普通编码（jpg、png等）的图像编码为base64，一切都正常。现在我想知道问题是否出在我使用的png和jpg JavaScript编码器上。看起来这些编码器（例如示例中的JPEGEncoder）似乎无法正确处理原始数据。那么，我该怎么办？有人知道任何JavaScript图像编码器吗？ - Gappa

相关：浏览器似乎可以处理将base64数据分成多行（就像在文本编辑器中一样），任何行宽都可以。 - JimB

Answer 1

我已经为您尝试过了=)

http://jsfiddle.net/bYGum/

您只需要确保您的字符串是base64编码的，并执行与您已经编写的完全相同的操作：

document.getElementById("image").src = jpgFile;

- Nando