將上傳的圖像保存到localStorage（chrome擴展名）

Question

我很難找到如何將上傳的圖像存儲在localStorage中，如用戶在我的選項頁面中輸入的內容。沒有太多的文件說明如何做，因爲一段時間它是一個known error，我無法找到堆棧上的任何示例。有一些關於如何在頁面上保存圖像但沒有輸入圖像的例子。

我所擁有的僅僅是HTML，但我想象在後面運行的JavaScript需要訪問輸入值或其他內容（？）。

<input id="uploadImage" type="file" accept="image/*" /> 

然後在用戶選擇一個文件後，輸入的值是C:\fakepath\some_image.jpg。如果可能，我不想存儲文件路徑，但存儲實際圖像。

$("#uploadImage").change(function(){ 
    alert($("#uploadImage").val()); 
}); 

編輯：

我發現如何從this stack topic做一個樣本，但文件路徑，我從$("#uploadImage").val()不工作得到（所以我不知道如果這個方法工作的工作，即使文件路徑爲有效）

var img = new Image(); 
img.src = $("#uploadImage").val(); 
img.load = function() { 
    var canvas = document.createElement('canvas'); 
    document.body.appendChild(canvas); 
    var context = canvas.getContext('2d'); 
    context.drawImage(img, 0, 0); 
    var data = context.getImageData(x, y, img.width, img.height).data; 
    localStorage['uploadedImage'] = data; // save image data 
}; 

Answer 1

這需要的FileReader API，並且僅僅是一個修改這個答案的版本（REF ：Loading an image to a <img> from <input file>）：

01：

var input = document.getElementById('uploadImage'); 
    input.onchange = function(evt){ 
     var tgt = evt.target || window.event.srcElement, 
      files = tgt.files; 

     if (FileReader && files && files.length) { 
      var fr = new FileReader(); 
      fr.onload = function() { 
       localStorage['foo'] = fr.result; 
      } 
      fr.readAsDataURL(files[0]); 
     } 
    } 

然後，您可以通過執行類似應用它作爲背景圖片

Answer 2

好了，這是你如何做到這一點：

1. 所有的R首先使用FileAPI讀取文件。一個很好的例子可以找到here
2. 你有一個文件內容後，你有另一個問題：如何存儲它。 LocalStorage只接受字符串，因此您需要將二進制映像文件轉換爲Base64，例如像他們這樣做here
3. 終於可以在以後使用data-URI

正如你可能會看到渲染圖片，這是不容易，但還是如果你按照指示，你可以做到這一點。

Answer 3

不能從http://或https://網址，打開網址file://，但這樣做違反安全（見this question），如果你只是從file:// URL應該與您的代碼工作運行你的HTML頁面。

你需要確保canvas元素是相同尺寸的圖像，雖然，也很後指定src屬性以防萬一它加載速度太快onload回調onload回調函數的最佳實踐綁定到位。

您還應該確保您使用正確的localStorage API來存儲和檢索localStorage中的項目。

canvas.toDataURL()也是獲取圖像數據的Base64字符串的較好方法。

這是一些更新的代碼。

var img = new Image(); 
img.onload = function() { 
    var canvas = document.createElement('canvas'); 
    canvas.width = this.width; 
    canvas.height = this.height; 
    document.body.appendChild(canvas); 

    var context = canvas.getContext('2d'); 
    context.drawImage(img, 0, 0); 

    var data = canvas.toDataURL(); 
    localStorage.setItem('uploadedImage', data); // save image data 
}; 
img.src = 'file://' + $("#uploadImage").val(); 

然後拿到該項目，並把它作爲你的頁面上的圖像，你可以使用：

var $img = $('<img />', { src: localStorage.getItem('uploadedImage') }); 
$('body').append($img);