Um den insgesamt abnormalen Informationsdatensatz zu lösen, hat das Projekt kürzlich die vollständige Screenshot -Funktion des Browsers untersucht, sodass Benutzer schnell Screenshots und an den Administrator senden können, wenn sie Abnormalitäten finden. Die im endgültigen Datensatz aufgezeichneten ultimativen Informationen sind wie folgt.
Einführung in HTML2CANVAsIn der Vergangenheit konnten wir Bilder nur durch andere Screenshot -Tools abfangen. Die Funktion moderner Browser ist immer stärker geworden. HTML2CANVAs ist ein solcher Front -End -Stecker -in, und sein Prinzip ist es, den DOM -Knoten in Leinwand zu zeichnen. Obwohl es bequem ist, gibt es die folgende Grenze:
Da mein Verwendungsszenario einfach ist, wird es auch von mir selbst definiert und die abnormale Seite wird auch von mir selbst definiert, dann reicht HTML2CANVAs aus.
Instanz verwendenZitat JQuery, HTML2CANVAs können verwendet werden und der Code ist einfach. Ich benutze HTML2CANVAS 0.5.0 Version hier
Html2canvas (#tbl_exception), {onrendered: function (canvas) {var url = canvas.todataurl (); PnGTO (Körper);Der erste Parameter ist das DOM -Objekt für Screenshot, und der zweite Parameter wird nach der Wiederherstellungs -Leinwand wiedergegeben.
| Name | Typ | Standard | Beschreibung |
|---|---|---|---|
| Zulassung | Boolean | FALSCH | Ob Cross-Origin-Bilder die Leinwand verdichten lassen |
| Hintergrund | Saite | #fff | Canvas -Hintergrundfarbe, wenn in DOM keiner aufgebaut ist. |
| Höhe | Nummer | NULL | Definieren Sie die Hacht der Leinwand in Pixeln. |
| Letterrendering | Boolean | FALSCH | Ob Sie jeden Buchstaben separat rendern. |
| Protokollierung | Boolean | FALSCH | Ob Sie Ereignisse in der Konsole protokollieren sollen. |
| Proxy | Saite | undefiniert | Die URL zum Projekt ist zum Laden von Cross-Origin-Bildern. |
| Tainttest | Boolean | WAHR | Unabhängig davon, ob Sie jedes Bild testen, wenn es die Leinwand vor dem Zeichnen festlegt |
| Time-out | Nummer | 0 | Timeout zum Laden von Bildern in Millisekunden. |
| Breite | Nummer | NULL | Definieren Sie die Breite der Leinwand in Pixeln. |
| Usecors | Boolean | FALSCH | Ob Sie versuchen, Cross-Origin-Bilder als CORS-Servad zu laden, bevor Sie zur Proxyie zurückkehren |
Nachdem Sie es eingeführt haben, kann der Screenshot den Inhalt nur auf dem aktuellen Bildschirm abfangen, wenn Sie über die Probleme sprechen, die Sie in Ihrer Verwendung aufgenommen haben. Finden Sie die Lösung, nachdem Sie den Stecker -Quellcode und den Debuggen überprüft haben. Der Quellcode und der geänderte Code sind unten veröffentlicht
Quellcode:
RenderDocument zurückgeben (node.ownerDocume, Optionen, node.ownerdocument {log) (options.onrendered ist veraltet, html2canvas return, verspricht die Leinwand.Code ändern:
// 2016-02-18 den Quellcode zum Lösen des Parameters, der nicht zur Unterstützung des Vollbildmodus verwendet werden kann, um die Optionen von Var Breite zu unterstützen. ! = Null? ) {log (options.onrendered ist veraltet, html2canvas gibt ein Versprechen zurück, das die Leinwand enthält);Es ist hauptsächlich, dass Benutzer die Breite und Höhe des DOM -Objekts beim Aufrufen anpassen können.
$ (#Btn_screen) .on (klick, function () {html2canvas ($ (#TBL_Exception), {Höhe: $ (#TBL_Exception) .outerHeight () + 20, Onrendered: fuins. (Canvas) {var url = canvas. todataurl (); [0] .click (); ZusammenfassenDurch die Vorderseite -Stecker ist die vollständige Screenshot -Funktion des Browsers implementiert. Jeder lernt.