Mit JavaScript -Screenshots möchte ich hier zwei Open -Source -Komponenten empfehlen: Eine ist Canvas2image, die die Leinwandzeichnung und das Programmieren von PNG/JPEG/BMP -Bildern programmieren kann. Aber alleine zu haben ist nicht genug. Wir müssen Screenshots eines jeden DOM (zumindest der überwiegenden Mehrheit) aufnehmen, für das HTML2CANVAs erforderlich sind, wodurch das DOM -Objekt in ein Canvas -Objekt umgewandelt werden kann. Wenn Sie die Funktionen der beiden kombinieren, können Sie den DOM -Screenshot auf der Seite in PNG- oder JPEG -Bilder aufnehmen, was sehr cool ist.
Canvas2image
Sein Prinzip ist es, das HTML5 -Canvas -Objekt zu verwenden, um die api toDataurl () bereitzustellen:
Die Codekopie lautet wie folgt:
var strdatauri = ocanvas.todataurl ();
// Gibt "Daten zurück: Bild/png; Base64, ivborw0kggoaaaansuheugaaamgaaadicayaaAct ..."
Das Ergebnis ist Basis64-codiert (tatsächlich kann das Bild in Form einer Zeichenfolge auch auf die Seite geschrieben werden), sodass wir auch eine Basis64-kodierte Bibliothek benötigen.
Derzeit gibt es jedoch viele Mängel. Zum Beispiel unterstützen Opera und Safari PNG nur, während Firefox viel besser unterstützend ist.
Es gibt zwei Möglichkeiten, Bilder auf die Seite zu schreiben. Eines soll ein Bildobjekt generieren, um an den Seiten -Dom -Baum zu schreiben, was auch eine besser unterstützende Methode ist:
Die Codekopie lautet wie folgt:
// Gibt ein <img> -Element zurück, das das konvertierte PNG -Bild enthält
var oimgpng = canvas2image.saveAspng (ocanvas, true);
Wenn Sie jedoch eine JavaScript -Screenshot -Funktion ausführen, sollten Sie das Dialogfeld "Speichern" möglicherweise automatisch zum Speichern der Datei nach dem Screenshot öffnen:
Die Codekopie lautet wie folgt:
Canvas2Image.SaveAspng (ocanvas);
// fordert den Benutzer auf, das Bild als PNG zu speichern.
Das Aufrufen dieser Methode generiert einen Datenstrom mit dem Mimetyp "Bild/Oktettstrom" zum Browser, aber der Dialog "Speichern" kann den entsprechenden Suffixnamen des Bildes nicht erkennen. Die Standardspeicherdatei wird unter Firefox "xxx.part" bezeichnet. Das ist schade, aber es scheint keine gute Lösung zu geben.
html2canvas
Es wirkt auf den DOM -Ladevorgang, sammelt die darin enthaltenen Informationen und zeichnet dann das Canvas -Bild. Mit anderen Worten, es wird den angezeigten DOM-Baum nicht in ein Canvas-Bild einschneidet, sondern ein Leinwandbild basierend auf dem DOM-Baum. Daher können viele CSS -Stile nicht genau identifiziert werden und können in der Abbildung nicht genau reflektiert werden.
Es gibt viele andere Einschränkungen wie:
● JavaScript muss die gleiche Domäne haben. Für Cross-Domänen-Situationen müssen Sie einen Proxy-Server verwenden (es gibt Parameter in der API, die angegeben werden können), und das gleiche gilt für das Bild.
● Der DOM -Baum im Rahmen kann nicht genau gezeichnet werden.
● Da Sie ein Canvas-Diagramm zeichnen möchten, müssen Browser wie IE8 Bibliotheken wie FlashCanvas verwenden.
Diese Seite kann den Effekt der Verwendung von Screenshots in jeder Website testen, und der Effekt ist recht gut:
Beispiele für die API -Verwendung:
Die Codekopie lautet wie folgt:
html2canvas (
[DOM1, DOM2],
{
Protokollierung: Falsch,
Usecors: Falsch,
Proxy: Falsch,
onrendered: function (canvas) {
// Canvas ist das gezogene Leinwandobjekt
}
}
);
Für diese Art von relativ Nischenklassenbibliothek ist die Dokumentation sehr schlecht, einschließlich der Definition der API, die das Lesen des Quellcodes erfordert und klar im Code geschrieben ist.
Darüber hinaus gibt es im Download-Paket dieser Website ein JQuery-Plug-In, das diese API verkörpert und ignoriert werden kann.