關於使用HTML5本地儲存圖片的介紹——和派孔明
大家可以把以下程式碼作為一個js檔案儲存，命名為ImgStorage.js,連結到頁面
<script src="ImgStorage.js" type="text/javascript"></script>
1
function set(key){//儲存 var img = document.createElement('img'); //當圖片載入完成時觸發回撥函式 img.addEventListener("load",function(){ var imgCanvas = document.createElement('canvas'); imgContest = imgCanvas.getContext('2d'); //確保canvas元素的大小和圖片尺寸一致 imgCanvas.width = this.width; imgCanvas.height = this.height;
//渲染圖片到canvas中 imgContest.drawImage(this,0,0,this.width,this.height);
//用data url的形式取出 var imgAsDataURL = imgCanvas.toDataURL("image/png");
//儲存到本地儲存中 try{ localStorage.setItem(key,imgAsDataURL); } catch(e){ console.log("Storage failed" + e); } },false); img.src = src; }
function get(div,key){//讀取get(容器,圖片) var srcStr = localStorage.getItem(key); var imgObj = document.createElement('img'); imgObj.src = srcStr; div.appendChild(imgObj); }
使用場景介紹：
圖片不怎麼更改，希望使用者第二次訪問時，能夠馬上看到 注意事項：
1.如果圖片比較大的話，將會佔用很多的localStorage的資源； 2.如果圖片和你請求的域名不再同一個域名下,canvas會報一個安全策略的問題,這個時候你需要給你的伺服器加一個access Origin等於所有，這使你的圖片實現跨域問題,去被canvas使用 使用方法：
<script type="text/javascript"> var src = "aaa.png"//引入圖片連結 </script>
<script> window.onload = function(){ set('imgtest');//儲存圖片 var Ipt = document.getElementById('input1'); var oDiv = document.getElementById('div1');//圖片容器 Ipt.onclick = function(){ get(oDiv,'imgtest');//獲取圖片 } } </script>
demo案例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="ImgStorage.js" type="text/javascript"></script>
<script type="text/javascript"> var src = "aaa.png"//引入圖片連結 </script>
<script> window.onload = function(){ set('imgtest'); var Ipt = document.getElementById('input1'); var oDiv = document.getElementById('div1'); Ipt.onclick = function(){ get(oDiv,'imgtest'); } } </script> </head> <body> <input id="input1" type="button" value="圖片顯示"> <div id="div1"></div> </body> </html>