14

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.

Gappa
  • 757
  • 2
  • 16
  • 34
  • According to the following post, it seems that you can set the 'src' to the raw data. Does this post help you at all? http://stackoverflow.com/questions/11027186/html-css-background-image-from-raw-image-data-not-url – Fizz Mar 20 '14 at 16:58
  • Normaly setting the .src property of an image element should work (see: http://stackoverflow.com/questions/11027186/html-css-background-image-from-raw-image-data-not-url) are you shure this is a base64 stream encoded response? – Nando Mar 20 '14 at 17:07
  • I already tried that way and having a normal encoded(jpg, png...) image and encode it to base64 everything works fine. Now I'm wondering if the problem are the png and jpg javascript encoders I use. It seems that the those encoder, like JPEGEncoder in the example, doesn't work fine with raw data. So, What can I do? does anyone know any javascript image encoder? – Gappa Mar 20 '14 at 18:15
  • Related: browsers seem to handle that base64 data broken into separate lines (as in a text editor), any line width you want. – JimB Dec 20 '21 at 19:13

1 Answers1

20

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;
Nando
  • 813
  • 2
  • 8
  • 18