Хранение файлов .jpg в локальном хранилище

Question

Я пытаюсь найти способ сохранить файлы .jpg со своего веб-сайта в локальное хранилище для увеличения скорости сайта.Теоретически это просто: преобразуйте файл picture.jpg в строку base64 и сохраните его с помощью setitem в локальном хранилище.чтобы снова отобразить картинку, просто загрузите строку base64 из локального хранилища и декодируйте обратно в jpg.Но, как всегда, практика сложнее.Я пытаюсь найти способ конвертировать файлы .jpg на лету в base64, используя html5 или javascript (без php!).У кого-то была такая же проблема, и он смог найти решение и мог бы поделиться кодом?

Answer 1

Я также использую манифест кэша HTML5, который поддерживает автономный случай и предназначен для вашей проблемы. Не используйте локальное хранилище с base64, потому что:

• Кодировка Base64 увеличивает размер файла до 137% (!)
• Алгоритм замедлит работу вашего приложения, поскольку не только скорость Интернета ограничивает ваше приложение, но и JavaScript не может быть выполнен так же быстро, как на настольных компьютерах. В моих тестах на мобильных телефонах у меня были проблемы с обычными javascript, поэтому я бы уменьшил javascript до минимума, и ваш контекст не нужен.
• локальное хранилище не поддерживается всегда и имеет ограничение!

Для манифестов кэша вы можете посмотреть w3.org - манифесты кэша также на html5 скалах есть руководство для начинающих.

Если вы не хотите использовать манифест 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

Кстати, localStorage лучше, чем кеш браузера. Google и Bing провели несколько тестов, пытаясь выяснить, какой метод кэширования быстрее, и вот результаты . ПРЕДУПРЕЖДЕНИЕ О SPOILER !!!!localStorage лучше.

Answer 4

Может быть лучше / проще использовать кеш HTML5, создав манифест кеша.