场景: 项目中需要提供多某些图表的截图功能,查找资料发现 html2canvas 是一个很好用的前端截图方法,利用jquery和html5的结合,便可以在前端直接生成图片保存,不需要后台交互用图片流等复杂操作
步骤:
1,引入js文件
<span style="font-size:18px;"><script type="text/javascript" src="js/jquery-1.6.4.js"></script>
<script type="text/javascript" src="js/html2canvas.js"></script></span>
2,准备好截取的 Dom元素,如要截取 id = tbl_exception 的div
<center>
<div style="width: 600px;border: 1px solid;height: 200px;">
<input type="button" id="changeDiv" value="改变div" />
</td> <input type="button" id="btn_screen" value="保存图片" />
</div>
<div id="tbl_exception"
style="width: 600px;overflow: auto;height: 300px;border: 1px solid;margin-top: 15px;">
<div style="width: 550px;border: 1px solid;" id="contentDiv">
<p>这些群里有个初的线索是在群里发现的,十中间商就是二道贩子,他们和很多数据有很多中间商</p>
<p>这些群里有个初的线索是在群里发现的,十中间商就是二道贩子,他们和很多数据有很多中间商</p>
<p>这些群里有个初的线索是在群里发现的,十中间商就是二道贩子,他们和很多数据有很多中间商</p>
<p>这些群里有个初的线索是在群里发现的,十中间商就是二道贩子,他们和很多数据有很多中间商</p>
<p>这些群里有个初的线索是在群里发现的,十中间商就是二道贩子,他们和很多数据有很多中间商</p>
<p>这些群里有个初的线索是在群里发现的,十中间商就是二道贩子,他们和很多数据有很多中间商</p>
<p>这些群里有个初的线索是在群里发现的,十中间商就是二道贩子,他们和很多数据有很多中间商</p>
<ul>
<li><a href="javascript:;">如果规定了两个以上的函数,则 toggle()
例如,如果存在三个函数,</a></li>
<li><a href="javascript:;">如果规定了两个以上的函数,则 toggle()
例如,如果存在三个函数,</a></li>
<li><a href="javascript:;">如果规定了两个以上的函数,则 toggle()
例如,如果存在三个函数,</a></li>
<li><a href="javascript:;">如果规定了两个以上的函数,则 toggle()
例如,如果存在三个函数,</a></li>
<li><a href="javascript:;">如果规定了两个以上的函数,则 toggle()
例如,如果存在三个函数,</a></li>
</ul>
<img alt="" src="img/c1b1a0290722dc27544ec55d89c5d0d1.jpg" width="500px" height="500px;">
<div>hahahahahaha</div>
<div style="border: 1px solid;margin-top: 15px;">
<table border="1px;">
<thead>
<tr>
<td style="width: 150px;">姓名</td>
<td style="width: 150px;">性别</td>
<td style="width: 150px;">年龄</td>
</tr>
</thead>
<tbody>
<tr>
<td>张三</td>
<td>男</td>
<td>55</td>
</tr>
<tr>
<td>王红</td>
<td>女</td>
<td>17</td>
</tr>
<tr>
<td>刘洋</td>
<td>男</td>
<td>37</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div
style="width: 600px;height: 300px;border: 1px solid;margin-top: 10px;">
<p>我是div2</p>
</div>
<div
style="width: 600px;height: 300px;border: 1px solid;margin-top: 10px;">
<p>我是div3</p>
</div>
</center>
<script type="text/javascript">
$("#btn_screen").click(
function() {
html2canvas($("#tbl_exception"), { //可将 tbl_exception 更换为 contentDiv 看看结果
onrendered : function(canvas) {
var url = canvas.toDataURL();
//以下代码为下载此图片功能
var triggerDownload = $("<a>").attr("href", url).attr("download", "img.png").appendTo("body");
triggerDownload[0].click();
triggerDownload.remove();
}
});
});
$("#changeDiv").toggle(function() {
$("#tbl_exception").height("auto");
}, function() {
$("#tbl_exception").height("300px");
});
</script>
完成以上 3步,便能简单在一个 页面实现 网页截图功能,完整的示例可以下载查看。
下载地址:http://download.csdn.net/detail/u011752272/9641487
对于html2canvas的一些基本介绍,也可以查看http://www.jianshu.com/p/6a07e974a7e8进行了解学习。