[英]Store images in HTML5 local Storage onClick
我目前正在使用jQuery Mobile和PhoneGap將應用程序創建為輔助項目。 該應用程序將顯示多張圖像,並為用戶提供喜歡他/她喜歡的圖像的機會。 用戶單擊按鈕收藏圖像后,該圖像將顯示在“收藏夾”頁面(favorite.html)上。 我在使用本地存儲來合並此任務時遇到了麻煩。 甚至可以將圖像存儲和檢索到另一頁嗎? 任何幫助都會很棒。 如果需要視覺效果,以下是我的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>
首先,您必須確定應存儲什么圖像,可以看到圖像的自定義屬性(稱為數據名稱)和按鈕的其他屬性(稱為數據圖像),它們具有相同的內容:
<!-- 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);
});
其他想法是僅使用香草JS
第一頁-保存在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") );
第二頁-從localStorage恢復:
localStorage.getItem("savedImageData")
JSBin示例: https ://jsbin.com/hewapewoxe/edit ? html,js,console
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.