js實現的將網頁儲存為圖片簡單解釋介紹

本章介紹一下如何利用html2canvas庫實現將網頁儲存為圖片的效果。

過程其實是這樣的，那就是首先把網頁儲存為Canvas畫布，然後再將其儲存為圖片形式。

下面就簡單分佈做一下介紹，希望能夠給需要的朋友帶來幫助。

一.將網頁儲存為Canvas畫布:

首先將網頁儲存為Canvas畫布，這個要藉助於html2canvas庫。

此庫可以自行在網上查詢。

程式碼如下:

[JavaScript] 純文字檢視 複製程式碼
html2canvas(document.getElementById("id1"),{ 
  onrendered:function(canvas){ 
    //生成畫布後如何處理，當然可以在新標籤開啟，在浮層展示等等 
    document.getElementById("id2").appendChild(canvas);
  }, 
  //通過修改html2canvas原始碼新增canvas的id 
  canvas_id: 'canvas'
});

特別說明:

html2canvas()第一個引數為要生成canvas的區域，如果整個網頁生成canvas，則是document.body。第二個引數詳見官網設定canvas的各種屬性，當然修改原始碼可以新增自己想要的屬性，如給canvas新增id等。

二.把第一步中生成的canvas儲存成圖片:

[JavaScript] 純文字檢視 複製程式碼
var canvas=document.getElementById("canvas"),
url=canvas.toDataURL();// 
//以下程式碼為下載此圖片功能 
var triggerDownload=$("<a>").attr("href", url).attr("download", "img.png").appendTo("body"); 
triggerDownload[0].click(); 
triggerDownload.remove();

這裡關注toDataURL()方法即可，可以把canvas轉化成data形式的圖片url，把這個url賦給<img/>標籤即可顯示圖片，程式碼中其他部分為自己需要的下載功能。