html2canvas 网页截图

场景：  项目中需要提供多某些图表的截图功能，查找资料发现 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>

3，调用  html2canvas  方法

    

<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进行了解学习。