Question

我有一个函数将图像编码为base64字符串并将其存储到localStorage中。我试图从localStorage检索图像并使用它来设置jQuery的背景图像。

一切正常，但图像没有显示。当我在浏览器中检查元素时，没有插入'data'uri周围的单引号。我不知道这是不是问题。

这是我的代码

编码和存储图像的功能：

var img = document.getElementById("elephant");

function getBase64Image(img) {
    // Create an empty canvas element
    var canvas = document.createElement("canvas");
    canvas.width = img.width;
    canvas.height = img.height;

    // Copy the image contents to the canvas
    var ctx = canvas.getContext("2d");
    ctx.drawImage(img, 0, 0);

    // Get the data-URL formatted image
    // Firefox supports PNG and JPEG. You could check img.src to
    // guess the original format, but be aware the using "image/jpg"
    // will re-encode the image.
    var dataURL = canvas.toDataURL("image/png");
console.log(dataURL);

    return dataURL;     
}

jQuery设置图像：

localStorage.setItem("background" , getBase64Image(img));
console.log(localStorage);

background = localStorage.getItem("background")

console.log(background);

$("#elephant2").css('background-image' , 'url(' +background+ ')');

Answer 1

我认为问题是缺少引号，但它实际上是损坏/不完整的base64数据字符串。我将函数放在window.onload = function（）中，所以在转换为字符串之前完全加载图像，它就像一个魅力/

从localStorage base64字符串设置背景图像

1 个答案: