0

我目前正在编写一个 Chrome 扩展程序，需要将一些图像保存到 chrome.storage 内存中。我目前正在制作一组对象：

var AnImage = new Image()
AnImage.src = http://image.image/imageurl.png
var ObjectToSave = {   ...,
    graph_img : AnImage,
     ... }
...
AnArray[x] = ObjectToSave

我用一个简单的追加输出

document.getElementById("AnElement").appendChild(ObjectToSave.graph_img)

但是当我从存储中加载它并尝试再次附加它时，它会返回一个错误

Error in response to storage.get: TypeError: Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'.

当我通过 console.log() 输出它时，它会评估作为对象检索到的内容，但不是我能识别的任何内容。我目前正在使用 chrome.storage.sync

有没有办法做到这一点？存储图像的方式似乎没有什么帮助，并且存在的东西是旧的，并且谈论使用 base64 对旧存储 API 进行编码。但是当我进行初步研究时，有人声称不再需要 base64 编码

4

2 回答 2

3

经过更多查看，我发现 FileReader 对象提供了一种比使用 canvas 方法更优雅的方法。由于这是 chrome 的特定兼容性，因此得到了保证。

function ImageLoader( url ){
    var imgxhr = new XMLHttpRequest();
        imgxhr.open( "GET", url + "?" + new Date().getTime() );
        imgxhr.responseType = "blob";
        imgxhr.onload = function (){
            if ( imgxhr.status===200 ){
                reader.readAsDataURL(imgxhr.response);
            }
        };
    var reader = new FileReader();
        reader.onloadend = function () {
            document.getElementById( "image" ).src = reader.result;
            chrome.storage.local.set( { Image : reader.result } );
        };
    imgxhr.send();
}

需要使用chrome.storage.local，因为很可能chrome.storage.sync会超出存储大小限制。

于 2016-10-23T20:13:18.313 回答
0

正如评论中提到的 Marc Guiselin 和 wOxxOm ，chrome.storage将首先序列化数据，以保存图像，您可以：

  1. 保存图片src。chrome.storage.sync.set({ src: img.src });
  2. 保存图像 dataURL。
于 2016-08-08T01:00:58.787 回答