0

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

一切正常，但图像未显示。当我在浏览器中检查元素时，没有插入“数据”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+ ')');
4

1 回答 1

0

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

于 2013-11-11T23:19:07.050 回答