compressing and saving image captured to localStorage

I'm working on an HTML widget which will be embedded in an iBook in iBooks Author for the iPad.

I've got a simple button to trigger image capture on an iPad and all is working fine.

<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>

and

$('#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 at http://ift.tt/1Bm2Cs6

However, when the user moves off a page and returns, the image is lost as the page reloads. I need to store the image in localStorage.

I know that the fiddle at http://ift.tt/1GkscTV (courtesy of Musa on this site) holds code which could be the key for me.

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

But despite messing around with it for a couple of hours, I'm not getting it to work. Can anyone lend a hand with this?

I'm also concerned about compression. Do I need to use base64 encoding or something in case the image size causes the whole thing to crash?