最近寫了小工具用ASP.NET MVC及Knockout讀取跑道計圈GPS資料轉成HTML表格，當成運動記錄的圖檔附件，但每次產生HTML表格後都得用螢幕擷取工具將網頁畫面另存圖檔，雖然手續還算單純，但你知道，懶惰是沒有極限的，我開始動腦筋，打算將產生圖檔的動作也自動化。
薑薑薑薑~ 如上圖所示，真的被我找到方法! 一切要感謝神奇的程式庫—html2canvas，它可以將整張網頁或局部元素轉為HTML5 Canvas，一旦轉成Canvas，匯出圖檔便是小事一椿囉!
html2canvas的原理並非擷取網頁畫素，而是解析DOM及CSS的所有細節，在HTML5 Canvas裡以線、矩形、圓弧、文字... 等試著模擬出相同外觀，因此產出結果可能有細微誤差，也存在無法讀取跨網域內容的限制，但經實際使用，效果已讓人滿意，html2canvas幾乎是用Canvas打造出靜態網頁瀏覽器引擎，是神人級的作品。(咦? 我怎麼跪著寫範例程式... )
範例程式碼如下，有興趣的朋友也可試玩看看:
<!DOCTYPEhtml>
<html>
<head>
<metacharset="utf-8">
<title>HTML to Image</title>
<style>
table { background-color: #ccddff; } td { padding: 2px 6px; } table input { width: 100px; padding: 2px 6px;
color: blue; border: 1px solid gray;
}
fieldset { width: 200px; height: 120px; margin-top: 6px; }</style>
</head>
<body>
<table>
<tr><td>姓名</td><td><inputvalue="Darkthread"></td></tr>
<tr><td>積分</td><td><inputvalue="9999"></td></tr>
</table>
<hr/>
<inputtype="button"value="轉為圖檔"/>
<a></a>
<fieldset>
<legend>圖檔</legend>
<div>
</div>
</fieldset>
<scriptsrc="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.9.1.js "></script>
<script src="http://ajax.aspnetcdn.com/ajax/knockout/knockout-3.0.0.js "></script><script src="http://html2canvas.hertzen.com/build/html2canvas.js"></script><script>
$(":button").click(function() {
html2canvas($("table")[0], { onrendered: function(canvas) {var $div = $("fieldset div");
$div.empty();
$("<img />", { src: canvas.toDataURL("image/png") }).appendTo($div);
}
});
});
</script>
</body>
</html>