html2canvas是一个相当不错的JavaScript类库,它使用了html5和css3的一些新功能特性,实现了在客户端对网页进行截图的功 能。html2canvas通过获取页面的DOM和元素的样式信息,并将其渲染成canvas图片,从而实现给页面截图的功能。 因为每个浏览器渲染页面的方式都不尽相同,所以生成的图片也不太一样。虽然它目前还是处理开发阶段,但还是很值得期待的。 它不需要来自服务器任何渲染,整张图片都是在客户端浏览器创建。当浏览器不支持Canvas时,将采用Flashcanvas或ExplorerCanvas技术代替实现。
github:github.com/niklasvh/html2canvas
代码如下:
<!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> <p 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> </p> </body> </html>
以上是如何实现网页截屏(html2canvas)的详细内容。更多信息请关注PHP中文网其他相关文章!