H5 localStorage 缓存图片

利用canvas的图片对象可以缓存图片文件为流文件

<!DOCTYPE HTML>
<html>
<body>
	<figure>
 <img id="glassesgirl" src="" alt="A girl">
glasses girl
</figure>
 
	<script type="text/javascript">
//在本地存储中保存图片
var storageFiles = JSON.parse(localStorage.getItem("storageFiles")) || {},
glassesgirl = document.getElementById("glassesgirl"),
storageFilesDate = storageFiles.date,
date = new Date(),
todaysDate = (date.getMonth() + 1).toString() + date.getDate().toString();//一个月的过期时间
 
// 检查数据,如果不存在或者数据过期,则创建一个本地存储
if (typeof storageFilesDate === "undefined" || storageFilesDate < todaysDate) {
 	// 图片加载完成后执行
 	glassesgirl.addEventListener("load", function () { //图片load完毕自动触发这个机制
 		console.log("load image in storageFilesDate"); //这句话会比src set image 后输出
	 	var imgCanvas = document.createElement("canvas"),
	 	imgContext = imgCanvas.getContext("2d");
		// 确保canvas尺寸和图片一致
		imgCanvas.width = glassesgirl.width;
		imgCanvas.height = glassesgirl.height;
		// 在canvas中绘制图片
		imgContext.drawImage(glassesgirl, 0, 0, glassesgirl.width, glassesgirl.height);
		// 将图片保存为Data URI
		storageFiles.glassesgirl = imgCanvas.toDataURL("image/jpeg");
		storageFiles.date = todaysDate;
		// 将JSON保存到本地存储中
		try {
			localStorage.setItem("storageFiles", JSON.stringify(storageFiles));
		}
		catch (e) {
			console.log("Storage failed: " + e);
		}
	}, false);
	// 设置图片
 
	console.log("src set image");
	glassesgirl.setAttribute("src", "glasses.jpg");
}
else {
	console.log("from storageFiles");
	// Use image from localStorage
	glassesgirl.setAttribute("src", storageFiles.glassesgirl);
}
 
</script> 
 
 
</body>
</html>

图片头

data:image/jpeg;base64,/9j/4A

你会不会问,java-er.com这个小博客研究这个这能做什么。其实缓存图片的确干不了啥,因为5M,不过可以缓存个小图标啥得,也没什么意义。本文为了研究本地化存储,当localStorage换成indexDB就会突破5M的限制,将图片转换为本地存贮的技术是一样的。

我研究这个是因为我要缓存小音频文件,方便地铁上断网的时候,也能听。

不过我目前为止也只能借XHR的请求来转换。其实我想用php直接给转换成这个字符串,传给js对象就完事了。


This entry was posted in WEB前端 and tagged , , . Bookmark the permalink.
月小升QQ 2651044202, 技术交流QQ群 178491360
首发地址:月小升博客https://java-er.com/blog/h5-localstorage-cache-images/
无特殊说明,文章均为月小升原创,欢迎转载,转载请注明本文地址,谢谢
您的评论是我写作的动力

Leave a Reply

Your email address will not be published. Required fields are marked *

*

*

  

About Me

静水流深,水滴石穿