Maison > Article > interface Web > Pouvez-vous prendre une capture d'écran d'une page à l'aide de HTML5 Canvas ?

Pouvez-vous prendre une capture d'écran d'une page à l'aide de HTML5 Canvas ?

WBOYavant: 2023-09-07 10:45:08657parcourir

你能使用HTML5 Canvas在页面上截取一张屏幕截图吗？

Html2Canvas est une bibliothèque JavaScript qui peut prendre des captures d'écran de pages Web entières ou de parties spécifiques. Il ne prend pas de capture d'écran, mais crée une vue basée sur les informations de la page.

Exemple

Vous trouverez ci-dessous l'exemple de code. Ici, le script html2canvas.js est inclus dans

. Appelez la méthode html2canvas(). Renvoie la valeur base64, créant finalement la source de l'image ou le fichier image.

<!DOCTYPE html>
<html>
   <head>
      <script src="html2canvas-master/dist/html2canvas.js"></script>
   </head>
   <body>
      <h1>Take screenshot</h1>
      <div class="container" id=&#39;container&#39; >
         <imgsrc=&#39;images/one.jpg&#39; width=&#39;50&#39; height=&#39;50&#39;>
         <imgsrc=&#39;images/two.jpg&#39; width=&#39;50&#39; height=&#39;50&#39;>
      </div>
      <input type=&#39;button&#39; id=&#39;but_screenshot&#39; value=&#39;Take screenshot&#39; onclick=&#39;screenshot();&#39;><br/>
      <script>
         function screenshot(){
            html2canvas(document.body).then(function(canvas) {
               document.body.appendChild(canvas);
            });
         }
      </script>
   </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!

JavaScript html5 JS canvas

Déclaration：

Cet article est reproduit dans:. en cas de violation, veuillez contacter admin@php.cn Supprimer

Article précédent：Comment définir la largeur d’un tableau en HTML ?Article suivant：Comment définir la largeur d’un tableau en HTML ?

Articles Liés

Voir plus