javascript - onClick 将图像存储在 HTML5 本地存储中

Question

我目前正在使用 jQuery Mobile 和 PhoneGap 创建一个应用程序作为副项目。该应用程序将显示多个图像，并让用户有机会收藏他/她喜欢的图像。一旦用户单击按钮收藏图像，该图像将显示在收藏页面 (favorite.html) 上。我在使用本地存储来合并此任务时遇到问题。是否可以将图像存储和检索到另一个页面？任何帮助都会很棒。如果您需要视觉效果，下面是我的 jsfiddle 的链接。

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>

Answer 1

首先，您必须确定应存储什么图像，您可以看到图像的自定义属性称为 data-name，按钮的其他属性称为 data-image，两者具有相同的内容:

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

现在，当用户单击图像按钮时，首先您必须获取图像:

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

之后你应该得到图像的base64字符串

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

现在将其保存在 localStorage 上:

localStorage.setItem("image", base64);

现在在第二页上恢复 - 第二页 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>

第二页 JavaScript:

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