今天介紹一個非常好用的JQuery插件，它可以把網頁或某個div或table表格內容轉為圖片並下載保存。這個插件叫 html2canvas ，它只有一個js文件 html2canvas.js ，而使用起來也非常簡單。
先看一個實例html代碼，后面再介紹如何使用。
<html> <head> <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script> <script src="html2canvas.js"></script> </head> <body> <div id="html-content-holder" style="background-color: #F0F0F1; color: #00cc65; width: 500px; padding-left: 25px; padding-top: 10px;padding-right: 25px;padding-bottom: 15px;margin-bottom:15px;"> <strong>卡卡網 WebKaka.com</strong><hr/> <h3 style="color: #3e4b51;"> Html轉換為圖片 </h3> <p style="color: #3e4b51;"> <b>卡卡網 WebKaka.com</b> 旨在為廣大網站建設人員提供專業的網站測速和優化服務，以及為廣大網民提供網絡速度測試服務。 </p> <p style="color: #3e4b51;"> <b>html2canvas</b> 腳本可以直接在用戶瀏覽器上用來對網頁或其一部分內容進行截圖，截圖是基於DOM的，因此可能不完全准確。 </p> </div> <input id="btn-Preview-Image" type="button" value="預 覽"/> <a id="btn-Convert-Html2Image" href="#">下載</a> <br/> <h3>預 覽 :</h3> <div id="previewImage"></div> <script> $(document).ready(function(){ var element = $("#html-content-holder"); // global variable var getCanvas; // global variable $("#btn-Preview-Image").on('click', function () { html2canvas(element, { onrendered: function (canvas) { $("#previewImage").append(canvas); getCanvas = canvas; } }); }); $("#btn-Convert-Html2Image").on('click', function () { var imgageData = getCanvas.toDataURL("image/png"); // Now browser starts downloading it instead of just showing it var newData = imgageData.replace(/^data:image\/png/, "data:application/octet-stream"); $("#btn-Convert-Html2Image").attr("download", "your_pic_name.png").attr("href", newData); }); }); </script> </body> </html>
下面介紹如何使用該插件，主要有三步。
第一步：調用jquery庫文件和html2canvas.js文件
jquery庫文件可以調用百度公共庫的文件，而html2canvas.js文件需要下載到本地來調用，本文后面會附上下載地址。
代碼如下：
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script> <script src="html2canvas.js"></script>
第二步：預覽和下載的html代碼
點擊“預覽”可看到生成的圖片，點擊“下載”可把圖片下載保存起來。
代碼如下：
<input id="btn-Preview-Image" type="button" value="預 覽"/> <a id="btn-Convert-Html2Image" href="#">下載</a> <br/> <h3>預 覽 :</h3> <div id="previewImage"> </div>
第三部：生成和下載圖片的JQuery實現代碼
代碼如下：
<script> $(document).ready(function(){ //這是要轉成圖片的div id var element = $("#html-content-holder"); var getCanvas; //這是預覽按鈕的id $("#btn-Preview-Image").on('click', function () { html2canvas(element, { onrendered: function (canvas) { //這是顯示預覽圖的id $("#previewImage").append(canvas); getCanvas = canvas; } }); }); //這是下載圖片的id $("#btn-Convert-Html2Image").on('click', function () { var imgageData = getCanvas.toDataURL("image/png"); // Now browser starts downloading it instead of just showing it var newData = imgageData.replace(/^data:image\/png/, "data:application/octet-stream"); $("#btn-Convert-Html2Image").attr("download", "your_pic_name.png").attr("href", newData); }); }); </script>