jQuery キャンバスは QR コード付きのポスターを生成します

//jQuery.js で始まる
<script type="text/javascript" src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
//生成された画像がぼやけて不明瞭になる問題を解決します<script src="/images/202010/hidpi-canvas.min.js"></script>

<スクリプト>
    // コードを実行する$(function () {

        // ピクセル密度 このコードがないと、生成された画像がぼやける可能性があります function getPixelRatio(context) {
            var backingStore = context.backingStorePixelRatio ||
                context.webkitBackingStorePixelRatio ||
                context.mozBackingStorePixelRatio ||
                コンテキスト.msBackingStorePixelRatio ||
                コンテキスト.oBackingStorePixelRatio ||
                context.backingStorePixelRatio || 1;
            (window.devicePixelRatio || 1) / backingStore を返します。
        };
        //クリックイベント $(".myImg").click(function () {
            $(".dialog").fadeIn();
            var ダイアログSrc = $(this).attr("src")
            var csrfToken = document.querySelector('meta[name="csrf-token"]').getAttribute('content');
            //2. リクエストを送信する$.ajax({
                URL: "xxxx",
                タイプ: "投稿",
                データ型: 'json',
                ヘッダー: {
                    'X-CSRF-TOKEN': csrfToken
                }, //リクエストヘッダーの設定成功: function (res) {
                    var キャンバス = document.createElement("キャンバス");
                    var コンテキスト = canvas.getContext("2d");

                    var 比率 = getPixelRatio(コンテキスト)

                    キャンバスの幅 = 262 * 比率;
                    キャンバスの高さ = 450 * 比率;
                    context.rect(0, 0, キャンバス.幅 * 比率, キャンバス.高さ * 比率);
                    context.fillStyle = "#fff";
                    コンテキストを埋め込む();

                    var myImage2 = 新しいイメージ();
                    //背景画像 myImage2.src = dialogSrc
                    //ターミナルを取得します。var u = navigator.userAgent;
                    var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //Android ターミナル var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //iOS ターミナル myImage2.onload = function () {
                        context.drawImage(myImage2, 0, 0, 262 * 比率, 450 * 比率);
                        //テキスト var text = res.data.company + ',' + res.data.sales;
                        var str = 新しい配列();
                        str = テキストを分割します(",");
                        var 上高 = 0
                        //AppleとAndroidの携帯電話間のテキスト位置とフォントサイズの表示の違いの問題を解決します for (var i = 0; i < str.length; i++) {
                            if (isAndroid) {
                                context.font = "12px Calibri";
                                context.fillText(str[i], 70, 390 + 上高)
        高さ += 20
                            }

                            もしiOSであれば
                                context.font = "20px Calibri";
                                context.fillText(str[i], 140, 450 * 比率 - 120 + 上高)
        高さ += 40
                            }
                        }
                        var myImage = 新しい Image();
                        //QR コード画像 myImage.src = res.data.wxcode
                        myImage.crossOrigin = '匿名';
                        myImage.onload = 関数（）{
                            context.drawImage(myImage, 30, 380 * 比率, 48 * 比率, 50 * 比率);
                            var base64 = canvas.toDataURL("image/jpeg", 1.0);
                            var img = document.getElementById('myPoster');
                            img.setAttribute('src', base64);
                        }
                    }
                },
                エラー: 関数 (e) {
                    console.log('ajaxリクエスト例外、例外情報は次のとおりです:', e);
                }
            });
        });
        //ポップアップウィンドウを閉じる$(".close").click(function () {
            $(".dialog").fadeOut();
        })
    });
</スクリプト>