Heim > Artikel > Web-Frontend > Können Sie mit HTML5 Canvas einen Screenshot einer Seite erstellen?

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

WBOYnach vorne: 2023-09-07 10:45:08659Durchsuche

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

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!

JavaScript html5 JS canvas

Stellungnahme：

Dieser Artikel ist reproduziert unter:tutorialspoint.com. Bei Verstößen wenden Sie sich bitte an admin@php.cn löschen

Vorheriger Artikel：Wie stelle ich die Tabellenbreite in HTML ein?Nächster Artikel：Wie stelle ich die Tabellenbreite in HTML ein?

In Verbindung stehende Artikel

Mehr sehen