Implementierungscode zum Erstellen von Screenshots mit HTML und zum Speichern als lokale Bilder
|
Der spezifische Code lautet wie folgt:
<!DOCTYPE html>
<html>
<Kopf>
<meta charset="UTF-8">
<Titel>html2canvas_download</Titel>
<Stil>
A {
Cursor: Zeiger;
Farbe: RGB (85, 26, 139);
Textdekoration: Unterstreichen;
}
</Stil>
</Kopf>
<Text>
<div id="oDiv" style="Breite: 300px; Höhe: 300px; Rand: 10px; Hintergrund: rot; Rahmen: 5px durchgehend grau;">
<h1>Hallo Welt!</h1>
</div>
<!-- <script type="text/javascript" src="../dist/html2canvas.js"></script> -->
<script src="https://cdn.bootcss.com/html2canvas/0.5.0-beta4/html2canvas.min.js"></script>
<Skripttyp="text/javascript">
var oDiv = document.getElementById('oDiv');
//Bildschirmfoto des Hauptteils//html2canvas(document.body).then(function(canvas) {
// Dokument.Body.AppendChild(Canvas);
// });
html2canvas(oDiv).dann(Funktion(Canvas) {
Dokument.Body.AnhängenUntergeordnetesElement(Canvas);
var oCavans = document.getElementsByTagName('canvas')[0];
var strDataURI = oCavans.toDataURL();
downloadFn(strDataURI);
});
//Browsertyp bestimmen function myBrowser() {
var userAgent = navigator.userAgent; //Den userAgent des Browsers abrufen string var isOpera = userAgent.indexOf("Opera") > -1;
wenn(istOpera) {
Rückkehr "Oper"
}; //Beurteilen, ob es sich um den Opera-Browser handelt if(userAgent.indexOf("Firefox") > -1) {
gib "FF" zurück;
} //Beurteilen, ob es sich um den Firefox-Browser handelt if(userAgent.indexOf("Chrome") > -1) {
gib "Chrome" zurück;
}
wenn (userAgent.indexOf("Safari") > -1) {
gib "Safari" zurück;
} // Bestimmen Sie, ob es sich um den Safari-Browser handelt, wenn (userAgent.indexOf("compatible") > -1 && userAgent.indexOf("MSIE") > -1 && !isOpera) {
gib "IE" zurück;
}; //Beurteilen, ob es sich um einen IE-Browser handelt if(userAgent.indexOf("Trident") > -1) {
gib "Kante" zurück;
} //Feststellen, ob es sich um den Edge-Browser handelt}
//Der IE-Browser speichert das Bild lokal function SaveAs5(imgURL) {
var oPop = window.open(imgURL, "", "Breite=1, Höhe=1, oben=5000, links=5000");
für(; oPop.document.readyState != "abgeschlossen";) {
wenn (oPop.document.readyState == "abgeschlossen") abbrechen;
}
oPop.document.execCommand("SpeichernUnter");
oPop.schließen();
}
// Chrome14+, Firefox20+, Pera15+, Edge 13+, Safari implementieren die Funktion download(strDataURI) { nicht.
var link = document.createElement('a');
link.innerHTML = "Canvas-Bild herunterladen";
link.download = "meinGemälde.png";
link.addEventListener('klicken', Funktion(ev) {
link.href = strDataURI;
}, FALSCH);
Dokument.Body.AnhängenKind(Link);
};
Funktion downLoadFn(url) {
wenn(meinBrowser() === "IE" || meinBrowser() === "Edge") {
SpeichernUnter5(url);
} anders {
herunterladen (URL);
}
}
</Skript>
</body>
</html>Zusammenfassen Oben sehen Sie den Implementierungscode, den ich Ihnen vorgestellt habe, um HTML-Screenshots zu verwenden und sie als lokale Bilder zu speichern. Ich hoffe, er wird Ihnen hilfreich sein. Wenn Sie Fragen haben, hinterlassen Sie mir bitte eine Nachricht und ich werde Ihnen rechtzeitig antworten. Ich möchte auch allen für ihre Unterstützung der Website 123WORDPRESS.COM danken! |
<<: Beispielcode der Uniapp Vue- und NVUE-Karussellkomponenten
>>: Dinge, die Sie nicht über die CSS-Pseudoelemente ::before und ::after wissen
Artikel empfehlen
Detaillierte Erklärung zum Ändern des Standardstils der externen Komponente Vant basierend auf der Vue-CLI-Entwicklung
Inhaltsverzeichnis Vorwort 1. Weniger 2. Importie...
Zen-Codierung für Editplus – Beispielcodebeschreibung
Er gibt beispielsweise ein: XML/HTML Code div#Seit...
Mehrere Techniken zum Abspielen von Sounds mit CSS
CSS ist der Bereich von Stil, Layout und Präsenta...
So analysieren Sie die Leistung von MySQL-Abfragen
Inhaltsverzeichnis Grundlagen langsamer Abfragen:...
Beispiele für die korrekte Verwendung von Schnittstellen- und Typmethoden in TypeScript
Inhaltsverzeichnis Vorwort Schnittstelle Typ Anha...
Tiefgreifendes Verständnis des Linux-Lastausgleichs LVS
Inhaltsverzeichnis 1. LVS-Lastausgleich 2. Grundl...
Detaillierte Methode zur Verwendung von GoAccess zum Analysieren von Nginx-Protokollen
Vor kurzem wollte ich Goaccess verwenden, um Ngin...
Vue implementiert die Funktionen Vergrößern, Verkleinern und Ziehen
In diesem Artikelbeispiel wird der spezifische Co...
Lösung für das Problem, dass die InnoDB-Engine beim Starten von MySQL deaktiviert wird
Finden Sie das Problem Als ich heute bei der Arbe...
Beispielcode mit Vue-Router in HTML
Einführung in Vue und Vue-Router <script src=&...
Nginx übernimmt die Analyse des Implementierungsprozesses für HTTP-Anforderungen
Nginx entscheidet zunächst, welcher Serverblock i...
So installieren Sie den Elasticsearch7.6-Cluster im Docker und legen ein Kennwort fest
Inhaltsverzeichnis Einige grundlegende Konfigurat...
Vollständiges Installationstutorial zum Ubuntu 16.04-Image unter VMware
In diesem Artikel finden Sie das Installations-Tu...
Vue implementiert Beispielcode für Links- und Rechtsgleiteffekte
Vorwort Die bei der persönlichen tatsächlichen En...
Grafisches Tutorial zur Installation und Konfiguration von MySQL 8.0.23 unter Win10
In diesem Artikel wird die Installations- und Kon...