Question

目前我有这段代码来设置链接的background-image：

$("a.link").css("background-image", "url('images/icon.png')";

我想改进它以将图像存储在localStorage：

中

if (!localStorage.getItem("icon") {

  iconBase64 = //How to convert my image in images/icon.png to a base64 string?

  localStorage.setItem("icon", iconBase64);
}

$("a.link").css("background-image", "url(data:image/png;base64," + localStorage.getItem("icon") + ")");

令人难以置信的是，我找不到任何合适的解决方案......我已经看到了关于创建<canvas>或类似的东西的事情，但我想应该有更容易的事情......不是那里？

Answer 1

我不敢。有一些方法可以转换二进制blob（例如用户通过<input type="file" />选择但不直接从<img>标记选择的PNG。

然而，使用画布技术相当容易：

function getDataURL(img) {

    var canvas = document.createElement('canvas');
    canvas.width = img.width;
    canvas.height = img.height;
    var ctx = canvas.getContext('2d');
    ctx.drawImage(img, 0, 0);
    return canvas.toDataURL();

}

var dataURL = getDataURL(document.querySelector('#myimg'));

请注意，这只有在<img>和调用脚本位于同一域时才会起作用（我无法在JSFiddle上演示此内容）。

Answer 2

使用canvas或XMLHTTPRequest + FileReader获取dataURL。

function getImageDataURL(imgURL, callback) {
    var img = new Image();
    img.onload = function (){
        var canvas = document.createElement('canvas');
        canvas.width = img.width;
        canvas.height = img.height;
        var ctx = canvas.getContext('2d');
        ctx.drawImage(img, 0, 0);
        callback(canvas.toDataURL());
    };
    img.src = imgURL;
}
function getFileDataURL(fileURL, callback) {
    var oReq = new XMLHttpRequest();
    oReq.onload = function (e){
        var reader = new FileReader();
        reader.onload = function (e) {
            callback(e.target.result); //DataURL
        };
        reader.readAsDataURL(e.target.response);
    };
    oReq.open('get', fileURL, true);
    oReq.responseType='blob';
    oReq.send();
}
function setBG(dataURL){
    $("a.link").css("background-image", "url(data:image/png;base64," + dataURL + ")");
}
function test(){
    var dataURL = localStorage.getItem("icon");
    if (!dataURL) {
        //use getImageDataURL or getFileDataURL
        getImageDataURL('images/icon.png', function (dataURL){
            localStorage.setItem("icon", dataURL);
            setBG(dataURL);
        });
    } else {
        setBG(dataURL);
    }
}
test();

Answer 3

我使用读者完成了这项工作，但对于我创建了预览的上传文件。

var file = "icon.png";
var reader = new FileReader();
reader.onload = function (e) {
    iconBase64 = e.target.result;
}
reader.readAsDataURL(file);

但是我从未尝试使用服务器中的文件。此外，这应该添加数据：image / png; base64已经。

Javascript：图像到base64 for localStorage

3 个答案: