如何使用 html 和 javascript 显示原始图像数据？答案

【问题标题】：How to display raw image data with html and javascript?如何使用 html 和 javascript 显示原始图像数据？
【发布时间】：2014-03-20 16:56:32
【问题描述】：

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

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

图像数据为 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。

【问题讨论】：

根据以下帖子，您似乎可以将'src'设置为原始数据。这篇文章对你有帮助吗？ stackoverflow.com/questions/11027186/…
通常设置图像元素的 .src 属性应该可以工作（参见：stackoverflow.com/questions/11027186/…）你确定这是一个 base64 流编码的响应吗？
我已经尝试过这种方式，并且有一个正常的编码（jpg，png...）图像并将其编码为 base64 一切正常。现在我想知道问题是否出在我使用的 png 和 jpg javascript 编码器上。似乎这些编码器，如示例中的 JPEGEncoder，不适用于原始数据。那么，我能做什么？有人知道任何 javascript 图像编码器吗？
相关：浏览器似乎可以处理分解成单独行的 base64 数据（如在文本编辑器中），任何你想要的行宽。

标签： javascript html image encoding

【解决方案1】：

为你试过 =)

http://jsfiddle.net/bYGum/

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

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

【讨论】：