html2canvas转换图片模糊问题，怎么解决？

Question

找了好多方法都是放大来解决，但是我这边放大时截取的图有问题，请问大家怎么看？
具体主要转换代码如下：
html结构如下：

  <!--二维码页面-->
        <div class="codePage hideObj">
            <div class="popup"></div>
            <div class="poster" id="box" style="z-index: 999;"></div>
            <div class="poster" id="canvasimg" style="opacity: 0;">
                <div class="shareProductImg">
                    <img src="./images/activity618/shareMain.png" id="shareProductImg" />
                </div>
                <div class="qrBox">
                    <img :src=" BASE_URL + '/weixin/imageCtrl/getminiqrQr?scene=' + targetId + ',' + darenId + '&page=pages/index/index&width=300&pfChannelId=' + CHANNEL_ID" alt="">
                </div>
            </div>
        </div>
      

css代码：

 .popup,
    .popupRules {
        width: 100%;
        height: 100%;
        position: fixed;
        top: 0;
        background: rgba(0, 0, 0, 0.5);
        display: flex;
        justify-content: center;
        align-items: center;
        z-index: 9;
    }
    
    .poster {
        width: 70%;
        top: 50%;
        position: fixed;
        z-index: 9;
        left: 50%;
        margin-left: -35%;
        transform: translateY(-45%);
    }
    
    .shareProductImg img {
        width: 100%;
        border-radius: 0.1rem;
    }

 function createImg() {

        //创建一个新的canvas
        var canvas2 = document.createElement("canvas");
        //获取宽高
        var w = $('#canvasimg').width();
        var h = $('#canvasimg').height();
        // // 将canvas画布放大若干倍，然后盛放在较小的容器内，就显得不模糊了
        canvas2.width = w * 2;
        canvas2.height = h * 2;
        canvas2.style.width = w + "px";
        canvas2.style.height = h + "px";

        // //可以按照自己的需求，对context的参数修改,translate指的是偏移量
        var context = canvas2.getContext("2d");
        // context.translate(-75,-130);
        // context.scale(1.85, 1.78);
        context.scale(2, 2);


        html2canvas(document.querySelector('#canvasimg'), {
            useCORS: true,
            scale: 2,
            width: w,
            height: h,
            canvas: canvas2,
            dpi: window.devicePixelRatio * 2, // window.devicePixelRatio是设备像素比
        }).then(function(canvas) {

            var dataUrl = canvas.toDataURL();
            var newImg = document.createElement("img");
            newImg.src = dataUrl;

            newImg.width = w;
            newImg.height = h;

            $("#box").show();
            $("#box").html(newImg);
            //生成以后，隐藏内容容器
            document.querySelector('#canvasimg').style.display = 'none';
        });

    }

效果如下：

Answer 1

已解决，获取$('#canvasimg')的left和top的距离

    var rect = $('#canvasimg').get(0).getBoundingClientRect();

然后利用平移translate

    context.translate('-' + rect.left, '-' + rect.top);

这样就可以了