So implementieren Sie die Seiten-Screenshot-Funktion in JS

„Seiten-Screenshot“ ist eine Anforderung, die häufig im Front-End auftritt, z. B. bei der Generierung von Seitenpostern oder beim Teilen von Popup-Bildern. Da der Browser keine native Screenshot-API besitzt, muss zum Exportieren von Bildern Canvas verwendet werden, um die Anforderungen zu erfüllen.

Durchführbarkeit

1. Lösung 1: Schreiben Sie DOM in Canvas um und rufen Sie die toBlob- oder toDataURL-Methode von Canvas auf, um sofort in die Qiniu Cloud oder auf den Server hochzuladen.
2. Lösung 2: Verwenden Sie die Drittanbieterbibliothek html2canvas.js, um Canvas zu implementieren und elegant Canvas zu generieren, ohne das vorhandene DOM der Seite zu ändern

Lösungsauswahl

Lösung 1: Sie müssen den berechneten Stil jedes DOM-Elements manuell berechnen und dann die Größe, Position und andere Attribute des Elements auf der Leinwand berechnen.

Schwierigkeit der Lösung 1

• Die vorhandene HTML-Seite muss verworfen und mithilfe von Canvas neu geschrieben werden.
• Bei einer komplexen Seitenstruktur ist es nicht einfach, diese mithilfe von Canvas zu rekonstruieren.
• Haben Sie eine bestimmte Leinwandgrundlage.

Lösung 2: Das Projekt hat mehr als 20.000 Sterne auf Github und der Autor pflegt es immer noch aktiv. Die API ist sehr einfach und kann sofort in bestehenden Projekten verwendet werden.

html2canvas

Da es sich um eine allgemeine Nachfrage handelt, verfügt die Community über ausgereifte Lösungen. Probieren Sie zuerst die Lösungen der Community aus.

<div id="capture" style="padding: 10px; Hintergrund: #f5da55">
    <h4 style="color: #000; ">Hallo Welt!</h4>
</div>

html2canvas(document.querySelector("#capture")).dann(canvas => {
    Dokument.Body.AnhängenUntergeordnetesElement(Canvas)
});

Das Obige ist die Beispielverwendung der offiziellen Website. Auf der Webseite wird ein neues Canvas-DOM angezeigt. Als nächstes müssen wir nur noch die Leinwand in ein Bild umwandeln. Hier verwenden wir die nativen toDataURL- und toBlob-Methoden von Canvas, um zur Qiniu Cloud zu gelangen.

Bitte seien Sie bei der Verwendung vorsichtig. Wenn die erstellte Leinwand domänenübergreifende Bilder enthält, müssen Sie „allowTaint“ auf „true“ konfigurieren.

Wenn es sich um eine native Canvas-Implementierung handelt, müssen vor dem Zeichnen alle domänenübergreifenden Bildanforderungen des Canvas abgeschlossen werden. Es gibt zwei Lösungen

• Lösung 1: Schreiben Sie den img-Tag in HTML und die entsprechende Bild-URL in src. Der Nachteil liegt auf der Hand: Dadurch wird die Layoutstruktur der Seite beeinträchtigt.
• Lösung 2: Verwenden Sie js und neues Image(). Setzen Sie src auf die entsprechende Bild-URL und behandeln Sie zugehörige Vorgänge im Onload-Rückruf. Vorteile: Am praktikabelsten, aber es gibt das Problem der Rückrufhölle. Schreiben wir es mit Promise neu

Funktion asyncImage(url) {
    const img = neues Bild();
    img.src = URL;
    img.setAttribute('crossOrigin', 'anonymous');
    returniere neues Promise((lösen, ablehnen) => {
        img.onload = () => auflösen(img);
        img.onerror = ablehnen;
    });
}

OK, wir sind fertig. Können wir jetzt die Anforderungen liefern? Den Test habe ich gerne abgelegt, allerdings musste ich bei der Durchführung des Tests auf dem mobilen Endgerät feststellen, dass die erzeugten Bilder sehr unscharf waren. Das wird nicht funktionieren, es ist offensichtlich viel niedriger (es hat den Test nicht bestanden, orz).

GitHub hat ein entsprechendes Lösungsportal, diese Antwort löst auch die Probleme vieler Leute

Grundprinzip: Breite und Höhe der Leinwand verdoppeln. Verwenden Sie CSS, um den Canvas-Stil auf die einfache Größe einzustellen.

    var shareContent = IhrZielelement; 
    var Breite = ShareContent.OffsetWidth; 
    var Höhe = ShareContent.OffsetHeight; 
    var Leinwand = Dokument.createElement("Leinwand"); 
    var scale = 2 || window.devicePixelRatio; //Sie können auch das Gerätepixelverhältnis verwenden canvas.width = width * scale; 
    canvas.height = Höhe * Maßstab; 
    canvas.getContext("2d").scale(scale, scale); 

    var opts = {
        Maßstab: Maßstab, 
        Leinwand: Leinwand, 
        Protokollierung: wahr, 
        Breite: Breite, 
        Höhe: Höhe 
    };
    html2canvas(shareContent, opts).then(Funktion (Canvas) {
        var Kontext = Canvas.getContext('2d');

        var img = Canvas2Image.convertToImage(canvas, canvas.width, canvas.height);

        Dokument.body.appendChild(img);
        $(img).css({
            "Breite": Leinwandbreite / 2 + "px",
            "Höhe": Leinwandhöhe / 2 + "px",
        })
    });

Das Prinzip ist uns bereits bekannt und tatsächlich ist das Bild nach der tatsächlichen Anwendung viel klarer. Aber das Problem ist noch immer nicht gelöst.

Obwohl eine Verkleinerung die Übersichtlichkeit verbessert, muss das Bild dennoch in Originalgröße vorliegen. .

Nach vielen erfolglosen Versuchen habe ich mich schließlich dazu entschlossen, die Nutzung des Frameworks aufzugeben. Verwenden Sie einfach die native Leinwand, um eines zu erstellen!

Leinwandzeichnung

Wir wissen, dass auf Geräten mit hochauflösenden Bildschirmen alle auf die Leinwand gezeichneten Bilder, Texte, Linien und Formen verschwommen erscheinen können. Dies kann durch die Einführung von hidpi-canvas von GitHub effektiv gelöst werden.

1. Gehen Sie zunächst zu GitHub und laden Sie die Datei hidpi-canvas.js herunter: Portal;
2. Importieren Sie die Datei hidpi-canvas.js in das Projekt.
3. Rufen Sie die Funktion getPixelRatio() auf, um den Verhältniswert abzurufen.
4. Multiplizieren Sie in drawImage() Breite und Höhe mit dem Verhältnis;
5. Die endgültige Leinwand wird als Blog exportiert, in ein Dateiobjekt konvertiert und in die Qiniu Cloud hochgeladen.
   

Der Kerncode lautet wie folgt

    Funktion asyncImage(url) {
        const img = neues Bild();
        img.src = URL;
        img.setAttribute('crossOrigin', 'anonymous');
        returniere neues Promise((lösen, ablehnen) => {
            img.onload = () => auflösen(img);
            img.onerror = ablehnen;
        });
    }
    asynchrone Funktion drawCanvas(){
        var canvas = document.querySelector('canvas');
        var Kontext = Canvas.getContext('2d');
        var ratio = getPixelRatio(context); // Schlüsselcode canvas.width = 300 * ratio; // Leinwandbreite canvas.height = 300 * ratio; // Leinwandhöhe var divWidth = 300 * ratio; // Wird verwendet, um den Inhalt zu zentrieren var divHeight = 300 * ratio; // Wird verwendet, um den Inhalt zu zentrieren const image = await asyncImage('picUrl')
        const imgWidth = 550
        const imgHeight = 300
        Kontext.drawImage(dieses, 50, 50, Bildbreite * Verhältnis, Bildhöhe * Verhältnis)
        // Ein anderer Code
        const Blob = canvas.toBlob((Blob)=>{
            //In die Qiniu-Cloud hochladen});
    } 

Das endgültig generierte Bild ist endlich klar … es muss sich nur entsprechend der Offsetbreite des DOM an verschiedene Bildschirme anpassen.

Zusammenfassen

Wenn keine hohen Anforderungen an die Bildschärfe gestellt werden oder die Bildanforderung darin besteht, eine Miniaturansicht zu erstellen. Die Verwendung von html2canvas ist eine sehr gute Wahl.
Ansonsten sind die mit Leinwand gemalten Bilder klarer.

Dies ist das Ende dieses Artikels über die Implementierung der Seiten-Screenshot-Funktion mit JS. Weitere relevante Inhalte zur JS-Seiten-Screenshot-Funktion finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!