Wissen Sie, wie Sie mit Vue Screenshots von Webseiten erstellen?

npm installiere html2canvas --save

importiere html2canvas von „html2canvas“;

<el-button class="button-dalod" size="mini" title="Bild generieren" @click="toImage()" icon="el-icon-download"></el-button>

// Seitenelemente in Bilder umwandeln toImage () {
            // Manuell ein Canvas-Tag erstellen const canvas = document.createElement("canvas")
            // Holen Sie sich das übergeordnete Tag, d. h. das DOM-Element in diesem Tag generiert das Bild. // imageTofile ist ein benutzerdefinierter Referenzname für das übergeordnete Element innerhalb des Screenshot-Bereichs. let canvasBox = this.$refs.imageTofile
            // Breite und Höhe des übergeordneten Elements abrufen const width = parseInt(window.getComputedStyle(canvasBox).width)
            const Höhe = parseInt(window.getComputedStyle(canvasBox).Höhe)
            // Breite und Höhe * 2 und 2-mal vergrößert, um zu verhindern, dass das Bild unscharf wird canvas.width = width * 2
            canvas.height = Höhe * 2
            canvas.style.width = Breite + "px"
            canvas.style.height = Höhe + "px"
            const Kontext = Canvas.getContext("2d");
            Kontext.Skala(2, 2);
            const Optionen = {
                Hintergrundfarbe: null,
                Leinwand: Leinwand,
                useCORS: wahr
            }
            html2canvas(CanvasBox, Optionen).dann((Canvas) => {
                // toDataURL Bildformat in Base64 konvertiert
                let dataURL = canvas.toDataURL("bild/png")
                console.log(Daten-URL)
                dies.downloadImage(dataURL)
            })
        },
        //Lade das Bild herunter downloadImage(url) {
            // Wenn es sich auf einer Webseite befindet, können Sie direkt ein A-Tag zum direkten Download erstellen. let a = document.createElement('a')
            a.href = URL
            a.download = 'Startseite-Screenshot'
            ein.Klick()
        },