The image rendered using the background image attribute has become blurred, and I have configured high resolution to make it unclear

[007-liang]

     <!-- Background-Image -->
    <div id="reference" style="display: inline-block; width: 20px; height: 20px;">
        <div style="background-image: url(https://img.coregem.net/img/user/avatar/random/14.png?imageView2/1/w/200/h/200); opacity: 1; width: 20px; height: 20px; background-size: cover;"></div>
        <!-- <img id="img" src="https://img.coregem.net/img/user/avatar/random/14.png?imageView2/1/w/200/h/200" width="100" height="100"> -->
    </div>

    <script type="text/javascript" src="../dist/html2canvas.min.js"></script>
    <script type="text/javascript">
        await html2canvas(reference, { scale: 4, allowTaint: true, useCORS:true }).then(function (canvas) {
            document.body.appendChild(canvas);
        });
    </script>

    <!-- This Img tag -->
    <div id="reference" style="display: inline-block; width: 20px; height: 20px;">
        <!-- <div style="background-image: url(https://img.coregem.net/img/user/avatar/random/14.png?imageView2/1/w/200/h/200); opacity: 1; width: 20px; height: 20px; background-size: cover;"></div> -->
        <img id="img" src="https://img.coregem.net/img/user/avatar/random/14.png?imageView2/1/w/200/h/200" width="20" height="20">
    </div>

    <script type="text/javascript" src="../dist/html2canvas.min.js"></script>
    <script type="text/javascript">
        html2canvas(reference, { scale: 4, allowTaint: true, useCORS:true }).then(function (canvas) {
            document.body.appendChild(canvas);
        });
    </script>

[007-liang]

version: html2canvas 1.0.0-alpha.12

[Tingglelaoo]

version: html2canvas 1.0.0-alpha.12

@007-liang version 1.4.1 still caught this problem