javascript - turn image binary data into img tag - Stack Overflow|Programmer puzzle solving

When i do a post request to a route i have

/generate/image

i get something like: var file =

����JFIF��C��C��� ��    
�����+�}Yϭ�F39M>���������>���;��ˋ��uXʽ�w�ڤx\-[2g��k�S���H���m
[�V?[_W����#��v��}6�[��F�F�%����n�...

in the client i do:

var blob = new Blob([file], {type: 'image/png'});
var reader = new FileReader();

reader.onload = function (e) {
   $('#result').attr('src', e.target.result);
};

reader.readAsDataURL(blob);

but i get a corrupt image

what can i do?

EDIT: if i do

img.src = 'data:image/png;base64,' + btoa(file);

i get:

Uncaught InvalidCharacterError: Failed to execute 'btoa' on 'Window': The string to be encoded contains characters outside of the Latin1 range.

When i do a post request to a route i have

/generate/image

i get something like: var file =

����JFIF��C��C��� ��    
�����+�}Yϭ�F39M>���������>���;��ˋ��uXʽ�w�ڤx\-[2g��k�S���H���m
[�V?[_W����#��v��}6�[��F�F�%����n�...

in the client i do:

var blob = new Blob([file], {type: 'image/png'});
var reader = new FileReader();

reader.onload = function (e) {
   $('#result').attr('src', e.target.result);
};

reader.readAsDataURL(blob);

but i get a corrupt image

what can i do?

EDIT: if i do

img.src = 'data:image/png;base64,' + btoa(file);

i get:

Uncaught InvalidCharacterError: Failed to execute 'btoa' on 'Window': The string to be encoded contains characters outside of the Latin1 range.

Share Improve this question edited Sep 26, 2016 at 20:40 asked Sep 26, 2016 at 20:33 Abdul Hamid 2081 gold badge7 silver badges25 bronze badges

2 base64 encode it and use a data uri scheme – Mulan Commented Sep 26, 2016 at 20:35
1 getElementById not getElementByID. attr is a jQuery function, not a JavaScript function. – Sebastian Simon Commented Sep 26, 2016 at 20:35
Xufox sorry i have jquery included and i did changed getElementById, it was a typo – Abdul Hamid Commented Sep 26, 2016 at 20:37
Still shouldn't be able call attr() on a Javascript object. Besides, you are already using jQuery, why not just use $('#result').attr(...) – Adjit Commented Sep 26, 2016 at 20:40
i corrected that on the question now. – Abdul Hamid Commented Sep 26, 2016 at 20:42

| Show 3 more ments

2 Answers 2

Sorted by: Reset to default 3

Please don't use base64 and wast bandwidth + CPU Send the image binary as is and handle them correctly with Ajax. You should not get the result as a string. set xhr responseType to blob or use fetch's blob method.

fetch("/generate/image").then(res => res.blob())

When you have the blob don't use the file reader to turn it to a url.

Use URL.createObjectURL(blob)

At your backend you can do following:

var fs = require('fs');
fs.readFile(path to image from you file, 'base64', function(err, buf){
      /* Here you can send your base64 image data to client. Your base64 data is in buf. 
      I am using socket. You can just send. Read more about readFile function*/
      socket.emit('image upload', { image: true, buffer: buf });
});

As my client receives data from socket, I call a function:

socket.on('image upload', function(data){
                displayImage(data);
            });

var displayImage = function(data){
                var URL = 'data:image/jpg;base64,'+data.buffer;
                document.querySelector('#img-id').src = URL;
            };

The image will then be showed in img tag. Hope this works for you.

Programmer puzzle solving

javascript - turn image binary data into img tag - Stack Overflow

2 Answers 2

Articles related to this article

comment list (0)