이미지를 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로 인코딩하는 방법에 대해 이야기하고 있습니다. 나는 나의 초기 연구를하지만 당신이 수, 마크 Guiselin 및 wOxxOm이 코멘트에서 언급 한 바와 같이, chrome.storage이 이미지를 저장하려면 먼저 데이터를 직렬화합니다

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

그 base64 인코딩을 주장하는 사람들이 더 이상 필요했다 없었다 :

1. 이미지 src를 저장하십시오. chrome.storage.sync.set({ src: img.src });
2. Save the image dataURL.