Maison >interface Web >tutoriel HTML >Comment prendre des captures d'écran de pages Web (html2canvas)
Comment prendre des captures d'écran de pages Web (html2canvas)
- 零下一度original
- 2017-05-03 16:05:142827parcourir
html2canvas est une très bonne bibliothèque de classes JavaScript. Elle utilise certaines nouvelles fonctionnalités de HTML5 et CSS3 pour réaliser la fonction de prise de captures d'écran de pages Web sur le client. html2canvas réalise la fonction de prise de captures d'écran de la page en obtenant les informations DOM et de style des éléments de la page et en les transformant en une image de canevas. Étant donné que chaque navigateur affiche les pages différemment, les images générées sont également différentes. Bien qu’il soit encore au stade de développement, il vaut toujours la peine d’être attendu. Il ne nécessite aucun rendu de la part du serveur, l'intégralité de l'image est créée dans le navigateur client. Lorsque le navigateur ne prend pas en charge Canvas, la technologie Flashcanvas ou ExplorerCanvas sera utilisée à la place.
github : github.com/niklasvh/html2canvas
Le code est le suivant :
<!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>Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!