JavaScript mobile H5 image generation solution explanation

    /**
     * Get the pixel ratio according to window.devicePixelRatio*/
    function DPR() {
        if (window.devicePixelRatio && window.devicePixelRatio > 1) {
            return window.devicePixelRatio;
        }
        return 1;
    }
    /**
     * Convert the passed value to an integer */
    function parseValue(value) {
        return parseInt(value, 10);
    };
    /**
     * Draw canvas
     */
    async function drawCanvas (selector) {
        // Get the DOM node you want to convert const dom = document.querySelector(selector);
        const box = window.getComputedStyle(dom);
        // DOM node calculated width and height const width = parseValue(box.width);
        const height = parseValue(box.height);
        // Get pixel ratio const scaleBy = DPR();
        // Create a custom canvas element var canvas = document.createElement('canvas');
        // Set the canvas element attributes width and height to DOM node width and height * pixel ratio canvas.width = width * scaleBy;
        canvas.height = height * scaleBy;
        // Set canvas css width and height to DOM node width and height canvas.style.width = `${width}px`;
        canvas.style.height = `${height}px`;
 
        // Get the brush const context = canvas.getContext('2d');
 
        // Scale all drawn content by pixel ratio context.scale(scaleBy, scaleBy);
 
        let x = width;
        let y = height;
        return await html2canvas(dom, {canvas}).then(function () {
            convertCanvasToImage(canvas, x, y)
        })
    }
 
    /**
     * Convert the image to base64 format*/
    function convertCanvasToImage(canvas, x, y) {
        let image = new Image();
        let _container = document.getElementsByClassName('container')[0];
        let _body = document.getElementsByTagName('body')[0];
        image.width = x;
        image.height = y;
        image.src = canvas.toDataURL("image/png");
        _body.removeChild(_container);
        document.body.appendChild(image);
        return image;
    }
    drawCanvas('.container')

function DPR() {
        if (window.devicePixelRatio && window.devicePixelRatio > 1) {
            return window.devicePixelRatio;
        }
        return 1;
    }

var canvas = document.createElement('canvas');
        // Set the canvas element attributes width and height to DOM node width and height * pixel ratio canvas.width = width * scaleBy;
        canvas.height = height * scaleBy;
        // Set canvas css width and height to DOM node width and height canvas.style.width = `${width}px`;
        canvas.style.height = `${height}px`;
 
        // Get the brush const context = canvas.getContext('2d');
 
        // Scale all drawn content by pixel ratio context.scale(scaleBy, scaleBy);