Добавление изображения в расширение chrome.storage

Question

В настоящее время я пишу расширение Chrome, которое должно сохранять некоторые изображения в памяти chrome.storage. Я в настоящее время делаю массив объектов:

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

выхода I с простым Append

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 кодирование уже не было необходимости

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.local необходима, поскольку это весьма вероятно, что предельный размер для хранения chrome.storage.sync будет превышен.

Answer 2

Как Марк Guiselin и wOxxOm упоминается в комментариях, chrome.storage будет сериализовать данные первого, чтобы сохранить изображение, вы можете:

1. Сохраните изображение src. chrome.storage.sync.set({ src: img.src });
2. Save the image dataURL.