H5 localStorage 快取圖片

LocalStorage · 發表 2018-10-23 19:16:48

摘要：發表於 2018-10-23 11:16:48 by月小升利用ajax XHR物件可以建立獲取圖片流，將一個圖片轉換成DATAURL的模式儲存到本地 <!DOCTYPE HTML> <html> <body> <figure> &...

發表於 2018-10-23 11:16:48 by月小升

利用ajax XHR物件可以建立獲取圖片流，將一個圖片轉換成DATAURL的模式儲存到本地

<!DOCTYPE HTML>
<html>
<body>
<figure>
 <img id="glassesgirl" src="" alt="A girl">
glasses girl
</figure>
 
<script type="text/javascript">
 
// 獲取檔案
var glassesgirlStorage = localStorage.getItem("glassesgirl"),
glassesgirl = document.getElementById("glassesgirl");
if (glassesgirlStorage) {
 //如果已經存在則直接重用已儲存的資料
console.log("From Cache");
 glassesgirl.setAttribute("src", glassesgirlStorage);
}else{
 // 建立XHR, BlobBuilder 和FileReader 物件
 var xhr = new XMLHttpRequest();
 
var fileReader = new FileReader();
 
 xhr.open("GET", "glasses.jpg", true);
 
 xhr.responseType = 'blob';
 
 //https://developer.mozilla.org/zh-CN/docs/Web/API/BlobBlob可以用於存貯物件
 //https://developer.mozilla.org/zh-CN/docs/Web/API/FileReader/readAsDataURL
 xhr.addEventListener("load", function () {
 if (xhr.status === 200) {
 var blob = this.response;
fileReader.onload = function (evt) {
 // 用Data URI的格式讀取檔案內容
 var result = evt.target.result; //要點
 // 將圖片的src指向Data URI
 glassesgirl.setAttribute("src", result);
 //儲存到本地儲存中
 try {
 localStorage.setItem("glassesgirl", result);
 }
 catch (e) {
 console.log("Storage failed: " + e);
 }
 };
 // 以Data URI的形式載入blob
 fileReader.readAsDataURL(blob);
 }
 }, false);
 // 傳送非同步請求
 xhr.send();
}
 
 
</script> 
 
 
</body>
</html>

圖片頭

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

注意地址要是本地伺服器地址

http://localhost/javaer/h5/hfiles.html

或者線上地址

http://java-er.com/hfiles.html

否則XHR會因為跨域問題，無法訪問

你會不會問，java-er.com這個小部落格研究這個這能做什麼。其實 ofollow,noindex">快取圖片的確幹不了啥，因為5M，不過可以快取個小圖示啥得，也沒什麼意義。本文為了研究本地化儲存，當 localStorage 換成indexDB就會突破5M的限制，將圖片轉換為本地存貯的技術是一樣的。

我研究這個是因為我要快取小音訊檔案，方便地鐵上斷網的時候，也能聽。

不過我目前為止也只能借XHR的請求來轉換。其實我想用php直接給轉換成這個字串，傳給js物件就完事了。

首發地址：–

無特殊說明，文章均為月小升原創，歡迎轉載，轉載請註明本文地址，謝謝

H5 localStorage 快取圖片

您可能也會喜歡…