画像をchrome.storageエクステンションに入れる

Question

私は現在、chrome.storageメモリにいくつかの画像を保存する必要があるChrome拡張機能を書いています。私は現在のオブジェクトの配列を作っています：シンプルなAPPENDと

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

I出力を

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を使用しています

これを行う方法はありますか？画像の保存にはほとんど助けがなく、古いものは古いもので、古いストレージAPIの場合はbase64でエンコードすることについて話し合っています。しかし、私は私の最初の研究を行なったときにbase64エンコードを主張する人がいたマルク・GuiselinとwOxxOmはコメントで述べたように、もはや

Answer 1

もっと見ると、キャンバスメソッドを使用すると、よりエレガントな方法を提供するFileReaderオブジェクトが見つかりました。そして、これはクロム固有の互換性が保証されているためです。

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.sync用のストレージサイズの上限を超えることになる可能性が高いようchrome.storage.localが必要とされている使用。

Answer 2

必要ではなかった、chrome.storage画像を保存するために、最初にデータをシリアル化します、あなたはできます

1. イメージsrcを保存します。 chrome.storage.sync.set({ src: img.src });
2. Save the image dataURL。