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!


Share this Post

Commentami!