Skip to content

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

@summer-07

Description

@summer-07
     <!-- 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>

image

    <!-- 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>

image

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions