html2canvas 能夠實現在用戶瀏覽器端直接對整個或部分頁面進行截屏。這個html2canvas腳本將當頁面渲染成一個Canvas圖片，通過讀取DOM並將不同的樣式應用到這些元素上實現。
1.http://html2canvas.hertzen.com/ 訪問官網，demo拿走，js包也拿走，thanks for Niklas von Hertzen 0.0
2.個人寫的demo
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>html2canvas example</title>
<script type="text/javascript" src="js/html2canvas.js"></script>
<!--這裏要引下載好的html2canvas-->
<style type="text/css">
#capture > input{border: none; width: 200px;height: 30px;line-height: 30px;}
</style>
</head>
<script type="text/javascript">
function takeScreenshot() {
html2canvas(document.querySelector("#capture")).then(canvas => {
document.body.appendChild(canvas)
});
}
</script>
<body>
<div id="capture" style="padding: 10px; background:url(images/1.jpg) 50%; width: 700px; height: 500px;">
<input type="text" value="123" />
</div>
<input type="button" value="截圖" onclick="takeScreenshot()">
</body>
</html>
3.以上代碼就可以簡單實現功能了，另附一張api參數說明：
