如何用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谷歌搜索。

Answer 1

為你試過=）

http://jsfiddle.net/bYGum/

您所要做的就是確保您的字符串是base64編碼的，並執行與您已編寫完全相同的操作：

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