javascript - 将上传的图片保存到 localStorage(chrome 扩展)

Question

我无法确定如何将用户在我的选项页面中输入的上传图像准确存储在 localStorage 中。没有太多关于如何做的文档，因为有一段时间它是一个 known error我在 Stack 上找不到任何示例。有一些示例说明如何保存页面上已有的图像，但不保存输入图像上的任何图像。

我只有 HTML，但我想在后面运行的 javascript 需要访问输入的值或其他东西(？)。

<input id="uploadImage" type="file" accept="image/*" />

然后用户选择文件后，输入的值为C:\fakepath\some_image.jpg。如果可能的话，我不想存储文件路径但存储实际图像。

$("#uploadImage").change(function(){
    alert($("#uploadImage").val());
});

编辑:

我从 this stack topic 中找到了有关如何操作的示例，但是我从 $("#uploadImage").val() 得到的文件路径不起作用(所以我不知道这个方法是否有效，即使文件路径有效)

var img = new Image();
img.src = $("#uploadImage").val();
img.load = function() {
    var canvas = document.createElement('canvas');
    document.body.appendChild(canvas);
    var context = canvas.getContext('2d');
    context.drawImage(img, 0, 0);
    var data = context.getImageData(x, y, img.width, img.height).data;
    localStorage['uploadedImage'] = data; // save image data
};

Answer 1

这需要 FileReader API，并且只是此答案的修改版本(引用:Loading an image to a <img> from <input file>):

    var input = document.getElementById('uploadImage');
    input.onchange = function(evt){
        var tgt = evt.target || window.event.srcElement, 
            files = tgt.files;

        if (FileReader && files && files.length) {
            var fr = new FileReader();
            fr.onload = function () {
                localStorage['foo'] = fr.result;
            }
            fr.readAsDataURL(files[0]);
        }
    }

然后您可以通过执行以下操作将其用作背景图像:

var el = document.querySelector('body');
el.style.backgroundImage = 'url(' + localStorage['foo'] + ')';