Store images in HTML5 local Storage onClick

问题

I am currently creating an app as a side project using jQuery Mobile & PhoneGap. This app will show multiple images and gives the user the opportunity to favorite an image that he/she likes. Once the user clicks on the button to favorite the image, that image will display on the favorites page (favorite.html). I am having trouble using local Storage to incorporate this task. Is it even possible to store and retrieve images to another page? Any help will be great. Below is a link to my jsfiddle if you need a visual.

JSFiddle Demo

<!-- Page One -->
      <div data-role="page" id="one">
        <div data-role="header">
          <h1>Page 1</h1>
          </div>
            <div data-role="main">
                <img src="https://www.petfinder.com/wp-content/uploads/2012/11/140272627-grooming-needs-senior-cat-632x475.jpg" style="width: 100px;"/>
                <br />
                <button id="favcat">Click Here to Favorite Cat Image!</button>
                <br />
                <br />
                <img src="http://www.dogslovewagtime.com/wp-content/uploads/2015/07/Dog-Pictures.jpg" style="width: 100px;" />
                <br />
                <button id="favdog">Click Here to Favorite Dog Image!</button>

          </div>
</div>

          <!--Page Two -->
           <div data-role="page" id="two">
        <div data-role="header">
          <h1>Page 2: Stored and Retrieved Images Display On This Page Once Clicked</h1>
               </div>

            <div data-role="main">


          </div>
</div>

回答1:

First you must identify what image should be stored, you can see a custom attribute for image called data-name and other for button called data-image, both have the same content:

<!-- Page One -->
            <img data-name="catImage" src="https://www.petfinder.com/wp-content/uploads/2012/11/140272627-grooming-needs-senior-cat-632x475.jpg" style="width: 100px;"/>
            <br />
            <button class="btn-add-image" data-image="catImage">Click Here to Favorite Cat Image!</button>

Now, when a user click on a image button, first you must get your image:

var myImageName = $(this).attr("data-image");
var myImage = $('img[data-name="' + myImageName + '"]');

After you should get the image base64 string

//Create a Canvas
var myCanvas = document.createElement("canvas");

//Set width and height
myCanvas.width = myImage.width();
myCanvas.height = myImage.height();

//Draw imagem
var myContext = myCanvas.getContext("2d");
myContext.drawImage(myImage, 0, 0);

//And finally get canvas64 string
var base64 = myCanvas.toDataURL("image/jpeg"); // if it's a png uses image/png

And now save it on localStorage:

localStorage.setItem("image", base64);

And now restore on page two - page two HTML:

<!--Page Two -->
    <div data-role="page" id="two">
        <h1>Page 2: Stored and Retrieved Images Display On This Page Once Clicked</h1>
    </div>

    <div data-role="main" id="restoredImage">

    </div>

Page two JavaScript:

$(document).ready(function() {
    var img = document.createElement("img");
    img.src = localStorage.getItem("image");
    $("#restoredImage").html(img); 
});

回答2:

Other idea is use only vanilla JS

Page one - to save on localStorage:

var img = new Image,
canvas = document.createElement("canvas"),
ctx = canvas.getContext("2d"),
src = "http://example.com/image"; // insert image url here

img.crossOrigin = "Anonymous";


canvas.width = img.width;
canvas.height = img.height;
ctx.drawImage( img, 0, 0 );
localStorage.setItem( "savedImageData", canvas.toDataURL("image/png") );

Page two - to recovery from localStorage: