Erläuterung der Lösung zur mobilen H5-Bildgenerierung in JavaScript

    /**
     * Ermitteln Sie das Pixelverhältnis gemäß window.devicePixelRatio*/
    Funktion DPR() {
        wenn (window.devicePixelRatio && window.devicePixelRatio > 1) {
            gibt window.devicePixelRatio zurück;
        }
        Rückgabe 1;
    }
    /**
     * Konvertieren Sie den übergebenen Wert in eine Ganzzahl */
    Funktion parseValue(Wert) {
        gibt parseInt(Wert, 10) zurück;
    };
    /**
     * Leinwand zeichnen
     */
    asynchrone Funktion drawCanvas (Selektor) {
        // Holen Sie sich den DOM-Knoten, den Sie konvertieren möchten const dom = document.querySelector(selector);
        const box = window.getComputedStyle(dom);
        // Berechnete Breite und Höhe des DOM-Knotens const width = parseValue(box.width);
        const Höhe = parseValue(Box.Höhe);
        // Pixelverhältnis abrufen const scaleBy = DPR();
        // Ein benutzerdefiniertes Canvas-Element erstellen var canvas = document.createElement('canvas');
        //Setzen Sie die Canvas-Elementattribute Breite und Höhe auf das Verhältnis Breite und Höhe des DOM-Knotens * Pixel canvas.width = Breite * scaleBy;
        canvas.height = Höhe * Skalierung nach;
        // Canvas-CSS-Breite und -Höhe auf DOM-Knotenbreite und -Höhe einstellen canvas.style.width = `${width}px`;
        Leinwand.Stil.Höhe = `${height}px`;
 
        // Pinsel abrufen const context = canvas.getContext('2d');
 
        // Alle gezeichneten Inhalte nach Pixelverhältnis skalieren context.scale(scaleBy, scaleBy);
 
        sei x = Breite;
        sei y = Höhe;
        returniere und warte auf html2canvas(dom, {canvas}).dann(function () {
            ConvertCanvasToImage(Leinwand, x, y)
        })
    }
 
    /**
     * Konvertieren Sie das Bild in das Base64-Format*/
    Funktion convertCanvasToImage(canvas, x, y) {
        let image = neues Bild();
        let _container = document.getElementsByClassName('container')[0];
        let _body = document.getElementsByTagName('body')[0];
        Bildbreite = x;
        Bildhöhe = y;
        image.src = canvas.toDataURL("bild/png");
        _body.removeChild(_container);
        Dokument.Body.AppendChild(Bild);
        Bild zurückgeben;
    }
    zeichneCanvas('.container')

Funktion DPR() {
        wenn (window.devicePixelRatio && window.devicePixelRatio > 1) {
            gibt window.devicePixelRatio zurück;
        }
        Rückgabe 1;
    }

var Leinwand = Dokument.createElement('Leinwand');
        //Setzen Sie die Canvas-Elementattribute Breite und Höhe auf das Verhältnis Breite und Höhe des DOM-Knotens * Pixel canvas.width = Breite * scaleBy;
        canvas.height = Höhe * Skalierung nach;
        // Canvas-CSS-Breite und -Höhe auf DOM-Knotenbreite und -Höhe einstellen canvas.style.width = `${width}px`;
        Leinwand.Stil.Höhe = `${height}px`;
 
        // Pinsel abrufen const context = canvas.getContext('2d');
 
        // Alle gezeichneten Inhalte nach Pixelverhältnis skalieren context.scale(scaleBy, scaleBy);