canvas合成海报

html部分，背景图原始为552px *654px
这里有个坑，之前我没有把宽高写在行内，写在内联样式里，导致背景图根本就不准，所以一定把宽高写在行内样式里！！！

<main id="mask">
    <canvas id="myCanvas" width="276" height="327"></canvas>
</main>

JS部分

    function draw(applyNo) {
        var bg = {
            src: "https://static.19louimg.cn/ui/theme20/0211shengdu/jiaxing_poster.png"
        }
        var image = new Image();
        image.crossOrigin = "Anonymous";
        var c = document.getElementById("myCanvas");
        var ctx = c.getContext("2d");
        //*******解决移动端绘制出来海报模糊的问题START
        let dpr = window.devicePixelRatio; // 假设dpr为2
        // 根据dpr，扩大canvas画布的像素，使1个canvas像素和1个物理像素相等
        c.style.width = c.width + 'px';
        c.style.height = c.height + 'px';
        c.width = dpr * 276;
        c.height = dpr * 327;
        // 由于画布扩大，canvas的坐标系也跟着扩大，如果按照原先的坐标系绘图内容会缩小
        // 所以需要将绘制比例放大
        ctx.scale(dpr, dpr);
        //********解决移动端绘制出来海报模糊的问题END
        image.onload = function () {
            ctx.drawImage(image, 0, 0, 276, 327);
            ctx.font = "18px PingFangSC-Regular";
            ctx.fillStyle = '#24A193';
            ctx.fillText('亲爱的' + username+'小朋友', 37, 90);
            //二维码当前页地址 带参数
            var code = `https://jiaxing.19lou.com/vote/web/newDetail/${surveyNo}/${applyNo}?fromContent=${searchInfo}`
            var m5 = $.md5(code);
            var p1 = m5.substr(0, 2)
            var p2 = m5.substr(2, 2)
            var qrUrl = 'http://att3.citysbs.com/qrcode/' + p1 + '/' + p2 + '/' + m5 + '.png?data=' + encodeURIComponent(code)
            var codeImg = new Image();
            codeImg.crossOrigin = 'anonymous';
            codeImg.onload = function () {
                ctx.save();//创建保存点
                ctx.drawImage(codeImg, 150, 185, 70, 70);
                ctx.restore();
                var src = c.toDataURL("image/png");//把路径转为base64
                const img1 = document.createElement('img');
                img1.src = src
                $("#mask").append(img1)
                img1.id = 'img1'
                img1.style.cssText = "width:276px;height:327px;position:absolute;left:50%;margin-left:-138px;opacity:1;z-index:99;top:2rem";
            }
            codeImg.src = qrUrl;
        }
        image.src = bg.src;
    }

这里有个坑，之前我把画布生成的图片，也就是img1的opacity值为0的时候，华为mate20、p20保存图片竟然识别不到二维码，改为1就好了。