利用javascript保存浏览器div内容为图片
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参数说明：