壓縮並保存捕獲到localStorage的圖像

Question

我正在研究一個HTML小部件，該小部件將嵌入到iPad的iBooks Author中的iBook中。

我有一個簡單的按鈕來觸發iPad上的圖像捕捉，所有工作正常。

<div id="zeroDiv"> 
<input type="file" id="getPic" accept="image/*"> 
</div> 
<div id="picWrapper"> 
<img id="image"> 
<div id="buttDiv"> 
    <button id="picButt"><span class="buttText">Insert image</span> 

    </button> 
</div> 
</div> 

和

$('#picButt').click(function() { 
$('#getPic').trigger('click'); 
}); 

$(document).ready(function() { 
$("#getPic").on("change", gotPic); 
$("#image").load(); 
}); 

function gotPic(event) { 
$("#image").attr("src", URL.createObjectURL(event.target.files[0])); 
$("#picButt span").text("Change image"); 
} 

小提琴在https://jsfiddle.net/mikawaben/cq2yrh2z/

然而，當用戶移動過一個頁面和返回時，圖像被丟失的頁面重新加載。我需要將圖像存儲在localStorage中。

我知道http://jsfiddle.net/VXdkC/2/（本網站上的穆薩提供）提供的代碼可能是我的關鍵。

$('#addNote').click(function() { 
var Title = $('#title').val(); 
var Message = $('#message').val(); 
var pic = document.getElementById("file").files[0]; 
var imgUrl; 
var reader = new FileReader(); 
reader.onload = function(e) { 
    var imgURL = reader.result; 
    $('#notes').prepend("<div class='entry'><h1>" + Title + "</h1></p>"+ "<p>" + Message + "<img src=" + imgURL + "></p> </div>"); 

    var notes = $('#notes').html(); 
    localStorage.setItem('notes', notes); 
    saveDataToLocalStorage(imgURL); 
} 
reader.readAsDataURL(pic); 
return false; 
}); 

//show content of notes in storage 
$('#notes').html(localStorage.getItem('notes')); 
return false; 

但是，儘管它搞了幾個小時，但我沒有得到它的工作。任何人都可以借用這個嗎？

我也關心壓縮。我是否需要使用base64編碼或某些東西，以防圖像大小導致整個事件崩潰？

Answer 1

只需檢查是否有保存在頁面上的圖像並顯示它。然後選擇時保存圖像。

$(document).ready(function() { 
    $("#getPic").on("change", gotPic); 
    if (localStorage['url']){ 
     $("#image").attr("src", localStorage['url']); 
     $("#picButt span").text("Change image"); 
    }  
}); 

function gotPic(event) { 
    var reader = new FileReader(); 
    reader.onload = function(){ 
     $("#image").attr("src", this.result); 
     localStorage['url'] = this.result; 
     $("#picButt span").text("Change image"); 
    } 
    reader.readAsDataURL(event.target.files[0]); 
} 

https://jsfiddle.net/cq2yrh2z/1/