html：

           <canvas id="canvas" style="width:320px;height:530px;display:none;"></canvas>
            <img src="背景圖片" id="bg" width="320" height="530" style=""/>
            <div id="imgCode" style="display:none;"></div>

js：自己下載資源哈

引用    <script src="jquery-3.1.1.min.js"></script>
           <script src=“jquery-qrcode.min.js"></script>

<script>
    var code = $("#codeImg").val();
    $("#imgCode").qrcode({
        render: 'image',
        size: 170,
        text: code,
        radius: 0.5,
        quiet: 2,
    });
    function openCode(){
        var bg=document.getElementById("bg");
        var code=document.getElementById("imgCode").getElementsByTagName("img")[0];
        var canvas="";
        canvas=document.getElementById("canvas");
        canvas.width = 320;
        canvas.height = 530;
        var ctx=canvas.getContext("2d");
        ctx.drawImage(bg, 0, 0, 320, 530);
        ctx.drawImage(code, 72, 200, 170, 170);
        
        /*判斷是否為PC頁面*/
        if(/Android|webOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent)) {
            canvas.toBlob(function(blob) {
                var url = URL.createObjectURL(blob);
                bg.setAttribute("src",url);
            });
        } else {
            var image= new Image();
            ctx.drawImage(image,0,0,320,530);
            image.src = canvas.toDataURL("image/png");
            image.setAttribute("crossOrigin", 'Anonymous');
            bg.setAttribute("src",canvas.toDataURL("image/png"));
        }

    }
</script>