将上传的图像保存到 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'] + ')';

Answer 2

好吧，你可以这样做：

1. 首先使用 FileAPI 读取文件。一个很好的例子可以找到here
2. 拥有文件内容后，您还有另一个问题：如何存储它。 LocalStorage 只接受字符串，因此您需要将二进制图像文件转换为 Base64，例如就像他们一样here
3. 最后您可以稍后使用data-URI 渲染您的图像

如您所见，这并不容易，但如果您按照说明进行操作，您仍然可以做到。

Answer 3

您不能从http:// 或https:// URL 打开file:// URL，因为这会破坏安全性（请参阅this question），但是，如果您只是从file:// URL 运行您的HTML 页面应该与您的代码一起使用。

您确实需要确保画布元素与图像的尺寸相同，并且最好在onload 回调函数之后指定src 属性以防万一onload 回调绑定加载太快，无法到位。

您还应该确保使用正确的 localStorage API 来存储和检索 localStorage 中的项目。

canvas.toDataURL() 也是获取图像数据的 Base64 字符串的一种更简洁的方法。

这是一些更新的代码。

var img = new Image();
img.onload = function() {
    var canvas = document.createElement('canvas');
    canvas.width = this.width;
    canvas.height = this.height;
    document.body.appendChild(canvas);

    var context = canvas.getContext('2d');
    context.drawImage(img, 0, 0);

    var data = canvas.toDataURL();
    localStorage.setItem('uploadedImage', data); // save image data
};
img.src = 'file://' + $("#uploadImage").val();

然后要获取该项目并将其用作页面上的图像，您可以使用：

var $img = $('<img />', { src: localStorage.getItem('uploadedImage') });
$('body').append($img);