发表于 2018-10-23 11:16:48 by 月小升
利用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> |
<!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 |
data:image/jpeg;base64,/9j/4A

你会不会问,java-er.com这个小博客研究这个这能做什么。其实缓存图片的确干不了啥,因为5M,不过可以缓存个小图标啥得,也没什么意义。本文为了研究本地化存储,当localStorage换成indexDB就会突破5M的限制,将图片转换为本地存贮的技术是一样的。
我研究这个是因为我要缓存小音频文件,方便地铁上断网的时候,也能听。
不过我目前为止也只能借XHR的请求来转换。其实我想用php直接给转换成这个字符串,传给js对象就完事了。
This entry was posted in
WEB前端 and tagged
html5,
localStorage,
缓存. Bookmark the
permalink.
月小升QQ 2651044202, 技术交流QQ群 178491360
首发地址:
月小升博客 –
https://java-er.com/blog/h5-localstorage-cache-images/
无特殊说明,文章均为月小升原创,欢迎转载,转载请注明本文地址,谢谢
您的评论是我写作的动力.