1

I am receiving JSON response from the server, however using data URI has some common problems like length limitations not to mention security issues, etc.

Searching through, i have found some useful examples such as the createObjectURL and FileReader. However the images do not show.

So the blobs are base64 encoded and sent in JSON format. $json_array[]= base64_encode($flal_file);

In JavaScript, I do something like:

Attempt 1 (URL show in the source code but images do not show):

$(data).each(function(index,data){ 
var typedArray = data;
var blob = new Blob([typedArray.buffer], {type: 'application/octet-stream'}); 

var url = URL.createObjectURL(blob);
res = '<img  src="'+url+'"/>';

});

Attempt 2 (getting undefined result):

const blb    = new Blob(data, {type: "text/plain"});
const reader = new FileReader();

// This fires after the blob has been read/loaded.
reader.addEventListener('loadend', (e) => {
  const text = e.srcElement.result;
  console.log(text);
});


// Start reading the blob as text.
reader.readAsText(blb);

The browser cannot read the whole blob due to the length limitation. Perhaps i need to shorten the response from the server.

Gragas Incoming
  • 825
  • 1
  • 9
  • 23
  • 2
    I could be wrong, but there's something odd in `application/octet-stream`. This is usually used if one wants to download a file. Did you try using the mime-type of the origin image? – Cristian Traìna Jun 25 '19 at 08:06
  • Possible duplicate of [Creating a Blob from a base64 string in JavaScript](https://stackoverflow.com/questions/16245767/creating-a-blob-from-a-base64-string-in-javascript) – frobinsonj Jun 25 '19 at 08:07
  • For some reason some blobs are shown on Microsoft edge but not in Chrome and Firefox. I have also used the Jeremy's answer in the duplicate question to shorten the url but the problem persists. – Gragas Incoming 11 mins ago – Gragas Incoming Jun 25 '19 at 09:21

1 Answers1

-1

try loading your image byte array like below:

<img  src="data:image/jpg;base64, imageBytes"/>
Prasobh.Kollattu
  • 1,529
  • 1
  • 21
  • 32