压缩并保存捕获的图像到 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");
}

fiddle 在 https://jsfiddle.net/mikawaben/cq2yrh2z/

但是，当用户离开页面并 returns 时，图像会在页面重新加载时丢失。我需要将图像存储在 localStorage 中。

我知道 http://jsfiddle.net/VXdkC/2/ 的 fiddle（由本网站的 Musa 提供）包含可能是我的关键的代码。

$('#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/

压缩并保存捕获的图像到 localStorage

compressing and saving image captured to localStorage

javascript

jquery

image

base64

local-storage