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中文網其他相關文章！
