Storing .jpg files in local storage

Question

I am trying to find a way to save .jpg files from my site to localstorage in order to increase the speed of the site. Theoretically, it's simple: convert picture.jpg to a base64 string and save it using setitem in localstorage. to display the image again, just load the base64 line from localstorage and decode back to jpg. But, as always, practice is more difficult. I am trying to find a way to convert .jpg files on the fly to base64 using html5 or javascript (without php!). Someone had the same problem and could find a solution and could share the code?

Answer 1

I also use the HTML5 cache manifest, which also supports the standalone case and is designed for your problem. Do not use local storage with base64 because:

• Base64 encoding increases file size up to 137% (!)
• The algorithm will slow down your application, because not only Internet Speed ​​limits your application, but javascript cannot be executed as fast as on desktop computers. In my tests on mobile phones, I had problems with general javascripts, so I would reduce javascript to a minimum, and your context is not needed.
• Local storage is not supported in evertime mode and also has limitations!

w3.org - html5 Rocks .

chache HTML5, , , stackoverflow,

Answer 2

canvas toDataURL, . - :

var ctx = canvas.getContext("2d");

var img = new Image();

img.onload = function() {
   canvas.width = this.width;
   cavans.height = this.height;

   ctx.drawImage(this, 0, 0);

   var base64jpeg = canvas.toDataURL("image/jpeg");
}

img.src = "/images/myjpeg.jpg";

, " ", HTML5 : ( , ).

Answer 3

/ HTML5, .

Answer 4

By the way, localStorage is better than the browser cache. Google and Bing conducted several tests, trying to figure out which caching method works faster, and here are the results. SPOILER ALERT !!!! localStorage is better.