Периодически возникает необходимость дать пользователю работать с веб-сайтом / веб-аппом без интернета. Тут на помощь разработчику приходят всякие браузерные хранилища: localStorage
, WebSQL
, IndexedDB
. И если хранить текстовую информацию легко, то как быть с изображениями? Зачастую из API приходит только ссылка на фотографию или картинку. Один из способов конвертировать изображение в base64
и хранить это код, вставляя его потом в аттрибут src
нашего тега img
. Вот небольшая функция, которая делает такую конвертацию:
function saveImage(url) {
var img = document.createElement("img");
img.src = url;
img.onload = function() {
var key = encodeURIComponent(url),
canvas = document.createElement("canvas");
canvas.width = img.width;
canvas.height = img.height;
var ctx = canvas.getContext("2d");
ctx.drawImage(img, 0, 0);
localStorage.setItem(key, canvas.toDataURL("image/png"));
}
}
Она конвертирует изображения в base64
-код, используя canvas
, затем сохраняет его в localStorage
с ключем key
. key
– это наш адрес изображения (url
). Теперь в любой момент мы можем достать нашу картинку из локального хранилища и показать пользователю. Интернет для этого не нужен.