Effettuare screenshot di una pagina web con Javascript
Ho trovato una libreria in Javascript per effettuare screenshot di una pagina web, o di una parte di essa, e visualizzarli dentro ad una nostra pagina: html2canvas!
Il suo utilizzo non è complicato, alla funzione html2canvas bisogna passargli:
- cosa prendere (il documento intero o un determinato componente seguendo le linee guida del DOM)
- dove visualizzare il contenuto preso (nel nostro esempio dentro ad un canvas)
- cosa fare eventualmente dopo
Questo un esempio completo con canvas:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>Using an existing canvas to draw on</title>
<style>
canvas {
border: 1px solid black;
}
button {
clear: both;
display: block;
}
#content {
background: rgba(100, 255, 255, 0.5);
padding: 50px 10px;
}
</style>
</head>
<body>
<div>
<h1>Contenuto da visualizzare:</h1>
<div id="content">Il contenuto di questo elemento verrà visualizzato nel canvas qua sotto!</div>
</div>
<h1>Existing canvas:</h1>
<canvas width="500" height="200"></canvas>
<script type="text/javascript" src="html2canvas.js"></script>
<button>Screenshotta</button>
<script type="text/javascript">
var canvas = document.querySelector("canvas");
document.querySelector("button").addEventListener("click", function () {
html2canvas(document.querySelector("#content"), {canvas: canvas}).then(function (canvas) {
alert('Click');
});
}, false);
</script>
</body>
</html>
Enjoy!
javascript html2canvas html canvas screenshot
Commentami!