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>
版权声明：本文为博主原创文章，未经博主允许不得转载。
： » 使用html2canvas实现网页截屏功能
原创文章，作者：1402239773，如若转载，请注明出处：https://blog.ytso.com/251120.html