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