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

Question

I have an ajax application where the PHP side sends uncoded raw image data, coming from a camera, to the client javascript side.

I would like to display the image via html and javascript using img or canvas tags.

Image data are 32*32 unsigned char.

I would like to do, whatever it takes to reach my goal (encoding or everythig else), but I want to do it at client side beacause I cannot handle any other operation at the server side.

I tried to encode raw data into jpeg or png data but without success.

I post an example that doesn't work:

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

jpgFile is like

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

I got JPEGEncoder googling on internet.

Answer 1

Tried it for you =)

http://jsfiddle.net/bYGum/

All you have to do is make sure your string is base64 encoded and do the exact same thing you have already written:

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