将上传的图像保存到本地存储(chrome 扩展程序）

Saving an uploaded image to localStorage (chrome extension)

本文关键字：存储 chrome 扩展 程序 图像 保存      更新时间：2023-09-26

我无法找到如何将上传的图像存储在本地存储中，这是用户在我的选项页面中输入的。没有太多关于如何做到这一点的文档，因为有一段时间这是一个已知错误，我在 Stack 上找不到任何示例。有一些关于如何保存页面上已有的图像但不保存在输入图像上的示例。

我所拥有的只是 HTML，但我想在后面运行的 javascript 需要访问输入的值或其他东西（？

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

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

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

编辑：

我从这个堆栈主题中找到了一个关于如何做到这一点的示例，但我从$("#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
};

这需要FileReader API，并且只是这个答案的修改版本（参考：从将图像加载到）：

    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'] + ')';

好吧，这就是你可以做到的：

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

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

您无法从http://或https:// URL打开file:// URL，因为这会违反安全性（请参阅此问题），但是，如果您只是从file:// URL运行HTML页面，它应该与您的代码一起使用。

不过，您确实需要确保 canvas 元素与图像的尺寸相同，并且最佳做法是在 onload 回调函数之后指定 src 属性，以防它加载得太快而无法onload回调绑定。

还应确保使用正确的本地存储 API 来存储和检索本地存储中的项目。

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);
相关文章：