1

Which is the best way to store base64 image data for multiple images in browser for later use in Javascript? Please provide code sample also.

Thanks...

Nidhish
  • 361
  • 1
  • 3
  • 17

1 Answers1

2

1)More efficient is using of blob URLs, it takes fewer browser resources (link to post and link to documentation). and then you can create map object for you URLs. Base64 takes by 37% more memory then Blob url

window.imagesMap = {};
window.imagesMap["your_image_name_1.jpg"] = URL.createObjectURL(blob1);
window.imagesMap["your_image_name_2.jpg"] = URL.createObjectURL(blob2);

//then you can use it
....
img.src =   window.imagesMap["your_image_name_1.jpg"];
....

2) If you need save images between pages, you have two ways : store blob or store base64. Firstly research please storage limits on this site -> link

Then you can store blob ( it depends on of browser capability see for example this post - > link) or base64.

Community
  • 1
  • 1
Alex Nikulin
  • 8,194
  • 4
  • 35
  • 37
  • But I have a doubt regarding this blob URL. How long this will be available. When I tried to list these saved images, it seems to be broken. – Nidhish Jun 22 '16 at 06:13
  • For me it should be available for that session and in different pages. – Nidhish Jun 22 '16 at 06:14
  • It will be available until you close your page (when triggered document.unload) if you will not clean it by URL.revokeObjectURL – Alex Nikulin Jun 22 '16 at 06:15
  • This URLs will by available until you close your page, where you have been created this URLs – Alex Nikulin Jun 22 '16 at 06:16
  • Then what to do if these images should be displayed in another page? I tried by saving this in session storage. But the images are listed as broken. – Nidhish Jun 22 '16 at 06:19
  • Your images come from server or from user? – Alex Nikulin Jun 22 '16 at 06:23
  • Actually it is canvas image data. Am doing some edits to image and save. This may be done for multiple images. And all these images should be listed in next page. – Nidhish Jun 22 '16 at 06:28