15

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.

4
  • According to the following post, it seems that you can set the 'src' to the raw data. Does this post help you at all? stackoverflow.com/questions/11027186/…
    – Fizz
    Mar 20, 2014 at 16:58
  • Normaly setting the .src property of an image element should work (see: stackoverflow.com/questions/11027186/…) are you shure this is a base64 stream encoded response?
    – Nando
    Mar 20, 2014 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, 2014 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, 2021 at 19:13

1 Answer 1

21

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;

Your Answer

Reminder: Answers generated by Artificial Intelligence tools are not allowed on Stack Overflow. Learn more

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.