Home > Article > Web Front-end > How to take screenshots of web pages (html2canvas)
How to take screenshots of web pages (html2canvas)
- 零下一度Original
- 2017-05-03 16:05:142775browse
html2canvas is a pretty good JavaScript class library. It uses some new features of html5 and css3 to realize the function of taking screenshots of web pages on the client. html2canvas achieves the function of taking screenshots of the page by obtaining the DOM and style information of the elements of the page and rendering it into a canvas image. Because each browser renders pages differently, the images generated are also different. Although it is still in the development stage, it is still worth looking forward to. It does not require any rendering from the server, the entire image is created in the client browser. When the browser does not support Canvas, Flashcanvas or ExplorerCanvas technology will be used instead.
github：github.com/niklasvh/html2canvas
The code is as follows:
<!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>The above is the detailed content of How to take screenshots of web pages (html2canvas). For more information, please follow other related articles on the PHP Chinese website!