JavaScript モバイル H5 画像生成ソリューションの説明

    /**
     * window.devicePixelRatio に従ってピクセル比を取得します*/
    関数DPR() {
        (window.devicePixelRatio && window.devicePixelRatio > 1) の場合 {
            window.devicePixelRatio を返します。
        }
        1 を返します。
    }
    /**
     * 渡された値を整数に変換します */
    関数parseValue(値) {
        parseInt(値、10)を返します。
    };
    /**
     * キャンバスを描く
     */
    非同期関数drawCanvas（セレクタ）{
        // 変換したい DOM ノードを取得します。const dom = document.querySelector(selector);
        DOM のスタイルを DOM に設定します。
        // DOM ノードの計算された幅と高さ const width = parseValue(box.width);
        定数height = parseValue(box.height);
        // ピクセル比を取得します。const scaleBy = DPR();
        // カスタム キャンバス要素を作成します。 var canvas = document.createElement('canvas');
        // キャンバス要素の属性の幅と高さを DOM ノードの幅と高さ * ピクセル比に設定します。canvas.width = width * scaleBy;
        キャンバスの高さ = 高さ * スケール;
        // キャンバス CSS の幅と高さを DOM ノードの幅と高さに設定します。canvas.style.width = `${width}px`;
        canvas.style.height = `${height}px`;
 
        // ブラシを取得します const context = canvas.getContext('2d');
 
        // 描画されたすべてのコンテンツをピクセル比で拡大縮小します context.scale(scaleBy, scaleBy);
 
        x = 幅とします。
        y = 高さとします。
        戻り値 html2canvas(dom, {canvas}).then(function () {
            convertCanvasToImage(キャンバス、x、y)
        })
    }
 
    /**
     * 画像をbase64形式に変換します*/
    関数 convertCanvasToImage(キャンバス, x, y) {
        image = new Image();
        _container = document.getElementsByClassName('container')[0] とします。
        _body = document.getElementsByTagName('body')[0] とします。
        画像の幅 = x;
        画像の高さをyに設定します。
        image.src = canvas.toDataURL("image/png");
        _body.removeChild(_container);
        document.body.appendChild(画像);
        画像を返します。
    }
    キャンバスを描画します('.container')

関数DPR() {
        (window.devicePixelRatio && window.devicePixelRatio > 1) の場合 {
            window.devicePixelRatio を返します。
        }
        1 を返します。
    }

var キャンバス = document.createElement('キャンバス');
        // キャンバス要素の属性の幅と高さを DOM ノードの幅と高さ * ピクセル比に設定します。canvas.width = width * scaleBy;
        キャンバスの高さ = 高さ * スケール;
        // キャンバス CSS の幅と高さを DOM ノードの幅と高さに設定します。canvas.style.width = `${width}px`;
        canvas.style.height = `${height}px`;
 
        // ブラシを取得します const context = canvas.getContext('2d');
 
        // 描画されたすべてのコンテンツをピクセル比で拡大縮小します context.scale(scaleBy, scaleBy);