Pouvez-vous prendre une capture d'écran d'une page à l'aide de HTML5 Canvas ?-tutoriel HTML-php.cn

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

WBOY

Libérer： 2023-09-07 10:45:08

avant

688 Les gens l'ont consulté

你能使用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>

Copier après la connexion

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!