将图像存储在HTML5本地存储onClick中 [英] Store images in HTML5 local Storage onClick

问题描述

我目前正在使用jQuery Mobile& amp;创建一个应用程序作为辅助项目. PhoneGap.该应用程序将显示多张图像，并为用户提供喜欢他/她喜欢的图像的机会.用户单击按钮收藏图像后，该图像将显示在收藏夹"页面(favorite.html)上.我在使用本地存储来合并此任务时遇到了麻烦.甚至可以将图像存储和检索到另一页吗?任何帮助都会很棒.如果需要视觉效果，下面是指向我的jsfiddle的链接.

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

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

推荐答案

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

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 + '"]');

您应该获得图像base64字符串

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

现在将其保存在localStorage上:

And now save it on localStorage:

localStorage.setItem("image", base64);

现在在第二页-第二页HTML上进行还原:

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>

第二页JavaScript:

Page two JavaScript:

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

这篇关于将图像存储在HTML5本地存储onClick中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！