Question

如果将图像保存在本地存储中，我想从中加载图像，否则脚本应该从文件中加载图像并将其保存到本地存储 - 如果我在行中打开网站两次，则应填写第一个网站来自文件的图像，第二个来自本地存储的图像。

有趣的是，它在某些情况下有效（我只更改了本地存储名称 - 函数中的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,/, "");
}

EDIT 我不得不改变else语句 -

 else {
        imgObject.src = imgSrc;
        imgObject.onload = function() {
            imgData = getBase64Image(imgObject);
            localStorage.setItem(lsItem, imgData);
        }
        console.log("Photo from file");
    }

LocalStorage图像加载 - 奇怪的行为

0 个答案: