使用html2canvas实现网页截屏功能

HTML5 herman 5389浏览 0评论
公告:“业余草”微信公众号提供免费CSDN下载服务,关注业余草微信公众号,添加作者微信:xmtxtt,发送下载链接帮助你免费下载!
本博客日IP超过1300,PV 1800 左右,急需赞助商。
打开支付宝首页搜“567452957”领红包,间接赞助博主,谢谢!

html2canvas是一个相当不错的JavaScript类库,它使用了html5和css3的一些新功能特性,实现了在客户端对网页进行截图的功 能。html2canvas通过获取页面的DOM和元素的样式信息,并将其渲染成canvas图片,从而实现给页面截图的功能。 因为每个浏览器渲染页面的方式都不尽相同,所以生成的图片也不太一样。虽然它目前还是处理开发阶段,但还是很值得期待的。 它不需要来自服务器任何渲染,整张图片都是在客户端浏览器创建。当浏览器不支持Canvas时,将采用Flashcanvas或ExplorerCanvas技术代替实现。

代码如下:

<!DOCTYPE html>
<html>
	<head>
		<title>HTML5实现网页截屏</title>
		<script src="http://cdn.bootcss.com/jquery/3.0.0-beta1/jquery.min.js"></script>
		<script src="http://cdn.bootcss.com/html2canvas/0.5.0-beta4/html2canvas.js"></script>
		<script>
			function taoge(){
				html2canvas($('#xttblog'), {
					onrendered: function(canvas) {
						// canvas 是最后一个渲染的<canvas> 元素
						$('#btn').attr( 'href' , canvas.toDataURL() ) ;
						$('#btn').attr( 'download' , 'xttblog.png' ) ;
					}
				});
			}
		</script>
	</head>
	<body>
		<div id="xttblog">
			<img src="http://www.xttblog.com/wp-content/uploads/2016/03/123.png"/>
			<p>业余草,做专业的IT学习交流网站</p>
			<p>QQ群:135430763</p>
			<p>原文地址:http://www.xttblog.com/?p=261</p>
			<a href="" id="btn" onclick="taoge();">截图</a>
		</div>
	</body>
</html>

版权声明:本文为博主原创文章,未经博主允许不得转载。

业余草公众号

最后,欢迎关注我的个人微信公众号:业余草(yyucao)!可加QQ1群:135430763(2000人群已满),QQ2群:454796847(已满),QQ3群:187424846(已满)。QQ群进群密码:xttblog,想加微信群的朋友,可以微信搜索:xmtxtt,备注:“xttblog”,添加助理微信拉你进群。备注错误不会同意好友申请。再次感谢您的关注!后续有精彩内容会第一时间发给您!原创文章投稿请发送至532009913@qq.com邮箱。商务合作可添加助理微信进行沟通!

本文原文出处:业余草: » 使用html2canvas实现网页截屏功能