Положить изображение в расширение 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

Я вывод с простым добавлением

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

Answer 2

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

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