Können Sie mit HTML5 Canvas einen Screenshot einer Seite erstellen?-HTML-Tutorial-php.cn

Können Sie mit HTML5 Canvas einen Screenshot einer Seite erstellen?

WBOY

Freigeben： 2023-09-07 10:45:08

nach vorne

687 Leute haben es durchsucht

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

Html2Canvas ist eine JavaScript-Bibliothek, die Screenshots ganzer Webseiten oder bestimmter Teile erstellen kann. Es wird kein Screenshot erstellt, sondern eine Ansicht basierend auf den Seiteninformationen erstellt.

Beispiel

Unten finden Sie den Beispielcode. Hier ist das Skript html2canvas.js in

enthalten. Rufen Sie die Methode html2canvas() auf. Gibt den Base64-Wert zurück und erstellt letztendlich die Bildquelle oder Bilddatei.

<!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>

Nach dem Login kopieren

Das obige ist der detaillierte Inhalt vonKönnen Sie mit HTML5 Canvas einen Screenshot einer Seite erstellen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!