Я хочу загрузить изображение из локального хранилища, если оно там сохранено, в противном случае скрипт должен загрузить изображение из файла и сохранить его в локальном хранилище - если я открываю сайт два раза подряд, первый сайт должен быть заполненпо изображению из файла, второе по изображению из локального хранилища.
Что интересно, так это то, что он работает в некоторых случаях (я меняю только имя локального хранилища - это lsItem в функции), но в большинстве из них это не так.Посмотрите на вывод моей консоли после неудачной загрузки - я сделал несколько console.log в коде:
script.js:10 data:,
script.js:13 LocalStorage photo
data:image/jpg;base64,data:,:1 GET data:image/jpg;base64,data:, 0 ()
Кажется, что ничего не было преобразовано в Base64.Отображение изображения из файла работает хорошо, но когда дело доходит до отображения из локального хранилища, в большинстве случаев оно не работает.Интересно то, что если я несколько раз изменяю имя локального хранилища - в некоторых случаях 10, в других 20 все работает хорошо.
index.html
<!DOCTYPE HTML>
<html lang="pl">
<head>
<meta charset="utf-8" />
<title>LocalStorage</title>
</head>
<body>
<img id="myPhoto" src="" />
<script src="script.js"></script>
</body>
</html>
script.js
window.onload = function() {
getImage('photo', 'myPhoto', 'img/kokos2.jpg');
}
function getImage(lsItem, elementId, imgSrc) {
var localImage = localStorage.getItem(lsItem);
imgObject = document.getElementById(elementId);
console.log(localImage);
if (localImage !== null) {
imgObject.src = "data:image/jpg;base64," + localImage;
console.log("LocalStorage photo");
} else {
imgObject.src = imgSrc;
imgData = getBase64Image(imgObject);
localStorage.setItem(lsItem, imgData);
console.log("Photo from file");
}
}
function getBase64Image(img) {
var canvas = document.createElement("canvas");
canvas.width = img.width;
canvas.height = img.height;
var ctx = canvas.getContext("2d");
ctx.drawImage(img, 0, 0);
var dataURL = canvas.toDataURL("image/jpg");
return dataURL.replace(/^data:image\/(png|jpg);base64,/, "");
}
РЕДАКТИРОВАТЬ Мне пришлось изменить оператор else -
else {
imgObject.src = imgSrc;
imgObject.onload = function() {
imgData = getBase64Image(imgObject);
localStorage.setItem(lsItem, imgData);
}
console.log("Photo from file");
}