0

I currently have a large base64 image uri (Received via external JS script) and want to embed it into the HTML page. I did this successfully locally but now that it pulls it from another place it seems to not work, it loads part of the image then says "Image corrupt or truncated. URI in this note truncated due to length." This occurs both just in the <img> tag and using <canvas>, is there any way to load large images from uri? Or another way to display images from a base64 string?

What doesn't make sense is it works fine if I specify the base64 string as a javascript variable, but when I include it as a variable in an external script, it gives this error. Would breaking up the string then putting it back together fix this?

Mr Lister
  • 45,515
  • 15
  • 108
  • 150
bNolan
  • 1
  • 2
  • It's on purpose as decoding long Data URLs can potentially block the browser. Look into using ArrayBuffer to load the image as blobs. –  Apr 05 '16 at 03:32

1 Answers1

0

You shouldn't use data-URLs for huge files.

You could try to convert your base64 URL into a blob object and the blob object into a temporary blob url using the following javascript function:

function dataurlToBlobUrl(url){
  var parts = url.split(',',2);
  var mime = parts[0].substr(5).split(';')[0];
  var blob = b64toBlob(parts[1],mime);
  return URL.createObjectURL(blob);
}

And the b64toBlob function from here: https://stackoverflow.com/a/16245768/5406901

Just make sure to use "URL.revokeObjectURL" whenever you no longer need the blob url.

Community
  • 1
  • 1
Daniel Abrecht
  • 133
  • 1
  • 6