Effettuare screenshot di una pagina web con Javascript

Mattepuffo's logo
Effettuare screenshot di una pagina web con Javascript

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!


Condividi

Commentami!