JavaScript implementiert Webseiten-Screenshot-Funktion_Javascript-Fähigkeiten-js-Tutorial-php.cn

JavaScript implementiert Webseiten-Screenshot-Funktion_Javascript-Fähigkeiten

WBOY

Freigeben： 2016-05-16 16:34:00

Original

1798 Leute haben es durchsucht

Um Screenshots mit JavaScript zu erstellen, möchte ich hier zwei Open-Source-Komponenten empfehlen: Eine davon ist Canvas2Image, die Canvas-Zeichnungen in PNG/JPEG/BMP-Bilder programmieren kann, aber das allein reicht nicht aus. Wir müssen Folgendes geben: Um einen Screenshot eines beliebigen DOM (zumindest des größten Teils davon) zu erstellen, benötigen Sie html2canvas, das das DOM-Objekt in ein Canvas-Objekt konvertieren kann. Durch die Kombination der beiden Funktionen können Sie einen Screenshot des DOM auf der Seite in ein PNG- oder JPEG-Bild erstellen, was sehr cool ist.

Canvas2Image

Das Prinzip besteht darin, das HTML5-Canvas-Objekt zu verwenden, um die toDataURL()-API bereitzustellen:

Code kopieren Der Code lautet wie folgt:

var strDataURI = oCanvas.toDataURL();
// gibt „data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAADICAYAAACt...“
 zurück

Ein solches Ergebnis ist Base64-codiert (tatsächlich kann das Bild auf diese Weise auch in Form einer Zeichenfolge auf die Seite geschrieben werden), daher benötigen wir auch eine Base64-Codierungs- und Decodierungsbibliothek.

Allerdings gibt es derzeit viele Mängel. Beispielsweise unterstützen Opera und Safari derzeit nur PNG, während FireFox eine viel bessere Unterstützung bietet.

Es gibt zwei Möglichkeiten, Bilder zu generieren und in die Seite zu schreiben. Eine besteht darin, ein Bildobjekt zu generieren und es in den DOM-Baum der Seite zu schreiben. Dies ist auch eine unterstützendere Möglichkeit:

Code kopieren Der Code lautet wie folgt:

// gibt ein -Element zurück, das das konvertierte PNG-Bild
enthält var oImgPNG = Canvas2Image.saveAsPNG(oCanvas, true);

Wenn Sie jedoch eine JavaScript-Screenshot-Funktion erstellen, möchten Sie möglicherweise automatisch das Dialogfeld „Speichern“ zum Speichern der Datei öffnen, nachdem Sie den Screenshot erstellt haben:

Code kopieren Der Code lautet wie folgt:

Canvas2Image.saveAsPNG(oCanvas);

// fordert den Benutzer auf, das Bild als PNG zu speichern.

Der Aufruf dieser Methode generiert einen Datenstrom mit mimeType „image/octet-stream“ an den Browser, aber das Dialogfeld „Speichern“ kann den entsprechenden Suffixnamen des Bildes nicht erkennen. Die unter FireFox gespeicherte Standarddatei ist „xxx.part“. Das ist schade, aber es scheint keine Lösung zu geben.

html2canvas

Es wirkt auf den DOM-Ladevorgang ein, sammelt die Informationen und zeichnet dann das Canvas-Bild. Mit anderen Worten: Es schneidet den angezeigten DOM-Baum nicht wirklich in ein Canvas-Bild, sondern zeichnet eine Canvas basierend auf dem DOM-Baum neu. Bild. Daher können viele CSS-Stile nicht genau erkannt und im Bild nicht genau wiedergegeben werden.

Es gibt viele weitere Einschränkungen, wie zum Beispiel:

●Javascript muss in derselben Domäne vorhanden sein (es gibt Parameter in der API, die für Bilder angegeben werden können). ●Der DOM-Baum innerhalb des Rahmens kann nicht genau gezeichnet werden ●Da es sich bei der Zeichnung um eine Leinwand handelt, müssen Browser wie IE8 Bibliotheken von Drittanbietern wie

FlashCanvas
verwenden.
Diese Seite kann die Wirkung verschiedener Websites testen, die sie zum Erstellen von Screenshots verwenden, und die Wirkung ist ziemlich gut:

Beispiele für die API-Nutzung:

Code kopieren Der Code lautet wie folgt: html2canvas(

[dom1, dom2],

{

        Protokollierung: falsch,

useCORS: false,

​​​​proxy:​​false,

onrendered: function(canvas){

// Canvas ist das Objekt, das gezeichnet wird 

}

}

);

Für diese relativ Nischenklassenbibliothek ist die Dokumentation, einschließlich der Definition der API, sehr dürftig. Sie müssen den Quellcode lesen und der Code ist klar geschrieben.

Darüber hinaus gibt es im Download-Paket dieser Site ein JQuery-Plug-in, das diese API kapselt und ignoriert werden kann.