html2canvas以及new QRCode生成带有二维码的海报的问题

全局定义new QRCode
var posterQrCode = new QRCode(document.getElementById("qrcode"), {
        // text: data,
        width: 82,
        height: 82,
        correctLevel: 3 // 解决二维码识别不高的问题
    });
取消修改的时候给posterQrCode传值
 posterQrCode.makeCode(data);

解决二维码海报弹框出现顶部空挡的问题以及图片模糊问题
function createQrCode(data) {
      var canvas2 = document.createElement("canvas");
            var shareContent = document.getElementById("posterId");
            var w = parseInt(window.getComputedStyle(shareContent).width);
            var h = parseInt(window.getComputedStyle(shareContent).height);
            var context = canvas2.getContext("2d"); //获取2d上下文对象，大多数Canvas API均为此对象方法
            canvas2.width = w * 2;
            canvas2.height = h * 2;
            canvas2.style.width = w + "px";
            canvas2.style.height = h + "px";
            context.scale(2, 2); //绘图将定位于距离画布左上角两倍远的位置
            window.pageYoffset = 0;
            document.documentElement.scrollTop = 0;
            document.body.scrollTop = 0;
            var rect = shareContent.getBoundingClientRect(); //获取元素相对于视察的偏移量
            console.log(rect, 'rect', -rect.left, -rect.top);
            context.translate(-rect.left, -rect.top); //设置context位置，值为相对于视窗的偏移量负值，让图片复位
            html2canvas(shareContent, {
                canvas: canvas2,
                useCORS: true,
                backgroundColor: "#fff",
                width: w,
                height: h
            }).then(function (canvas) {
                sharePosturl = canvas.toDataURL();
                $(".canvasImg").attr('src', sharePosturl);
             
                //$(".can-content").click(function (e) {
                 //   e.stopPropagation();
               // });
            });
    }

 var canvas2 = document.createElement("canvas");
            var shareContent = document.getElementById(posterDiv);
            console.log(shareContent, 'shareContent');
            var width = parseInt(window.getComputedStyle(shareContent).width);
            var height = parseInt(window.getComputedStyle(shareContent).height);
            context = canvas2.getContext("2d");
            scale = 3;
            canvas2.width = width * scale; //设置放大倍数,保证清晰度
            canvas2.height = height * scale; //设置放大倍数,保证清晰度
            canvas2.style.width = width + "px";
            canvas2.style.height = height + "px";
            context.scale(scale, scale); //设置放大倍数与上面的宽高对应
            window.pageYoffset = 0;
            document.documentElement.scrollTop = 0;
            document.body.scrollTop = 0;
            var rect = shareContent.getBoundingClientRect(); //获取元素相对于视察的偏移量
            context.translate(-rect.left, -rect.top); //设置context位置，值为相对于视窗的偏移量负值，让图片复位
            html2canvas(shareContent, {
                // allowTaint: true,
                // taintTest: false,
                canvas: canvas2,
                useCORS: true,
                width: width,
                height: height,
                // scale: 2, // 处理模糊问题
                // dpi: 300, // 处理模糊问题
                /*windowWidth: document.body.scrollWidth,
                windowHeight: document.body.scrollHeight,
                x: 0,
                y: window.pageYOffset*/
            }).then(function (canvas) {
                $("#pageImg").attr('src', canvas.toDataURL());
            });

参考链接html2canvas生成图片模糊 不清楚？两种解决方法