Javascript:图像转为 localStorage 的 base64

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。

但是，使用 Canvas 技术相当简单:

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 上演示的原因)。