时间戳

首页 > 解决方案 > LocalStorage 图像加载 - 奇怪的行为

javascript - LocalStorage 图像加载 - 奇怪的行为

问题描述

如果图像保存在那里，我想从本地存储加载图像，否则脚本应该从文件加载图像并将其保存到本地存储 - 如果我连续打开站点两次，第一个站点应该由图像填充来自一个文件，第二个来自本地存储的图像。

有趣的是它在某些情况下有效（我只更改本地存储名称 - 它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 次中一切正常。

索引.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>

脚本.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");
    }

标签： javascripthtmllocal-storage

解决方案

推荐阅读