0

A Chrome extension I'm making which replaces the new tab page, loads the data for an image from localStorage really quickly but it takes 2-3 minutes to open the Elements tab of Chrome Dev Tools. I think it's because I'm using data:image in the background style of the body like this...

<body style="background-image: url(data:image/jpeg;base64, ...)">

...and it takes ages to load the ~40,000 characters.

Is there a better way to set image data in localStorage or a better way of displaying it with javascript/jQuery?

(I can't use a URL as it's using unsplash.it to load a random image)

Dan Bovey
  • 195
  • 2
  • 11
  • Why can't you use URL from that site? Like ``? – Justinas Feb 26 '15 at 14:16
  • Sorry forgot to mention that the extension saves the random image as the one image to use for that day. – Dan Bovey Feb 26 '15 at 14:24
  • Idea: put your base64 `localStorage` string in a Blob, per [Creating a Blob from a base64 string in JavaScript](http://stackoverflow.com/questions/16245767/creating-a-blob-from-a-base64-string-in-javascript) (note: you'll need to strip out the leading URL stuff; you only need the base64 data). Then , get a short URL that references that Blob with [URL.createObjectURL()](https://developer.mozilla.org/en-US/docs/Web/API/URL/createObjectURL) and place that URL in the HTML. – apsillers Feb 26 '15 at 14:30
  • Never worked with Blob before but it was a success! I'm still using b64 data in localStorage because as far as I researched, Blob is only used per document and so gets removed on refreshing a page, which is no good if I want to retain the image for 24 hours. Thanks! – Dan Bovey Feb 26 '15 at 16:27
  • _“I can't use a URL as it's using unsplash.it to load a random image”_ – that is no reason. You must select the random image somehow anyway, and then you should be able to copy it to your server and give the URL to it just as well … – CBroe Feb 26 '15 at 17:22
  • I'm not running it from a server, it's JS running on Google Chrome... The URL I'm using is `https://unsplash.it/1920/1080/?random` so I have no say in what I select and no way to get a static link to that image. – Dan Bovey Feb 26 '15 at 17:32

1 Answers1

2

After the idea from apsillers, I used Blob to convert the base64 data into a much shorter URL to use as a background-image.

Here's the steps I took:

  1. Used canvas to convert the image URL into image data

  2. Saved the base64 in localStorage by replacing beginning

    var b64Data = imageData.replace(/^data:image\/jpeg;base64,/, '');

  3. Created a Blob from the base64 string and created ObjectURL

    var blob = b64toBlob(b64Data, 'image/jpeg');
var blobUrl = URL.createObjectURL(blob);

  4. Used jQuery to set the background-image

    $('body').css('background-image', 'url(' + blobUrl + ')';

When I need to retrieve the same image, I take the same steps but get the base64 data which was previously stored in localStorage and convert it to an object URL.

And now Google Dev Tools is back to operating normally with the lack of thousands of characters of image data.

Community
  • 1
  • 1
Dan Bovey
  • 195
  • 2
  • 11
  • It's a shame Chrome doesn't support [canvas.toBlob](http://stackoverflow.com/questions/6736023/which-browsers-and-versions-support-the-canvas-toblob-method) – Dan Bovey Feb 26 '15 at 17:42