1. 程式人生 > >關於使用HTML5本地儲存圖片的介紹——和派孔明

關於使用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>