Die Verwendung von html2canvas zur Implementierung von Browser-Screenshots muss in einer Serverumgebung implementiert werden.
Wirkunghtml2canvas kann über reines JS Screenshots auf der Browserseite erstellen, die Genauigkeit der Screenshots muss jedoch verbessert werden und einige CSS können nicht erkannt werden, sodass der ursprüngliche Bildschirmstil nicht perfekt in Canvas dargestellt werden kann.
/*Es ist nicht möglich, den Mehrzeilenüberlauf wegzulassen, er kann nur ausgeblendet werden*/ .book_inf{ Position: relative; Textüberlauf: Auslassungspunkte; -webkit-line-clamp; : 2; - webkit-box-orient: vertikal; Unterstützte Browser /*Parameter: * #screenshots Die Element-ID des erforderlichen Screenshots, die Funktion, die nach der Aufnahme des Screenshots ausgeführt werden soll, * Hintergrundfarbe des Konfigurationselements „backgroundColor“ * Canvas ist die letzte Leinwand, die nach der Aufnahme des Screenshots zurückgegeben wird */function ScreenshotsImg(){ html2canvas (document.querySelector( #screenshots),{ backgroundColor: 'transparent',//Setzen Sie den Hintergrund auf transparent}).then(canvas => { canvasTurnImg(canvas) //Konvertierungsmethode für gespeicherte Bildformate}); Verfügbare Konfigurationselemente| Parametername | Typ | Standardwert | beschreiben |
|---|---|---|---|
| erlaubenTaint | Boolescher Wert | FALSCH | Ob Cross-Origin-Bilder die Leinwand verunreinigen dürfen: Cross-Origin zulassen |
| Hintergrund | Zeichenfolge | #fff | Leinwand-Hintergrundfarbe, wenn im DOM keine angegeben ist, undefiniert für transparent festlegen---Leinwand-Hintergrundfarbe, wenn das Standardweiß nicht festgelegt ist, ist dies eine Falle, ich habe es in „Hintergrundfarbe“ geändert. |
| Höhe | Nummer | null | Definieren Sie die Höhe der Leinwand in Pixeln. Wenn null, wird mit der vollen Höhe des Fensters gerendert. ---Einstellung für die Leinwandhöhe |
| LetterRendering | Boolescher Wert | FALSCH | Ob jeder Buchstabe einzeln gerendert werden soll. Erforderlich, wenn der Buchstabenabstand verwendet wird.---Nützlich, wenn der Buchstabenabstand festgelegt ist |
| Protokollierung | Boolescher Wert | FALSCH | Ob Ereignisse in der Konsole protokolliert werden sollen. ---Informationen in console.log() ausgeben |
| Proxy | Zeichenfolge | undefiniert | URL zum Proxy, der zum Laden von Cross-Origin-Bildern verwendet werden soll. Wenn es leer bleibt, werden Cross-Origin-Bilder nicht geladen.---Proxy-Adresse |
| tainTest | Boolescher Wert | WAHR | Ob jedes Bild vor dem Zeichnen getestet werden soll, wenn es die Leinwand verunreinigt – ob das Bild vor dem Rendern getestet werden soll |
| Time-out | Nummer | 0 | Zeitüberschreitung beim Laden von Bildern in Millisekunden. Wenn Sie den Wert auf 0 setzen, tritt keine Zeitüberschreitung auf. --- Verzögerung beim Laden von Bildern, die Standardverzögerung ist 0 in Millisekunden |
| Breite | Nummer | null | Definieren Sie die Breite der Leinwand in Pixeln. Wenn null, wird mit der gesamten Breite des Fensters gerendert.---canvas width |
| Verwenden Sie CORS | Boolescher Wert | FALSCH | Ob versucht werden soll, Cross-Origin-Bilder zu laden, während CORS bereitgestellt wird, bevor zum Proxy zurückgekehrt wird – Cross-Origin-Proxy |
1. Extrahieren Sie Bildmetadaten direkt von der Leinwand
// Das Bild in das PNG-Format exportieren var type = 'png'; var imgData = canvas.toDataURL(type);
2. Ändern Sie den Mime-Typ in „image/octet-stream“, um den Browser zum direkten Herunterladen zu zwingen.
/** * Get mimeType * @param {String} Geben Sie den alten Mime-Typ ein * @return den neuen Mime-Typ */var _fixType = function(type) { type = type.toLowerCase().replace(/jpg/i , 'jpeg'); var r = type.match(/png|jpeg|bmp|gif/)[0]; return 'image/' + r;}; Daten, MIME-Typ ersetzenimgData = imgData.replace(_fixType(type),'image/octet-stream');3. Laden Sie das Bild lokal herunter
/** * Dateien lokal speichern * @param {String} data Bilddaten, die lokal gespeichert werden sollen * @param {String} Dateiname Dateiname */var saveFile = function(data, filename){ var save_link = document.createElementNS ('http ://www.w3.org/1999/xhtml', 'a'); save_link.href = data; var event = document.createEvent('MouseEvents'); event.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, 0, null); event);}; // Heruntergeladener Dateiname var filename = 'baidufe_' + (new Date()).getTime() + '.' downloadsaveFile(imgData,filename);Fall
Fall
Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, dass er für das Studium aller hilfreich ist. Ich hoffe auch, dass jeder das VeVb Wulin Network unterstützt.