使用 html2canvas 捕获的 HTML div 未满

Question

I'm working on a meme editor website using the html2canvas library from https://html2canvas.hertzen.com/

here is my html code for the div that I need to capture:

<div class="container">
    <div id="theUserMeme">

        <div class="row">

            <p id="memeWords">
                When I see something lol 

            </p>

        </div>

        <div class="row">
            <img id = "memeImage" src="images/init meme.jpg">
        </div>

    </div>
</div>

Also, this my JavaScript code that I run to capture the div :

function generateMeme(){

    window.scrollTo(0,0);

    html2canvas(document.querySelector("#theUserMeme")).then(canvas => {
        
        var image = canvas.toDataURL('image/jpeg', 1);
        console.log(image);
        
        alert(image);

        document.getElementById("finalImageCopy").src = image;
    });


}

After hosting the code on Github, I tried the page on my iPhone and my laptop. It was working well on both devices, but after that it is working on the phone only. When I use it on the desktop, the captured image isn't full and sometimes it is only white image.

What is the problem could be?

Answer 1

It seems by default width of a <div> is equal to width of the visible area (please correctly if I'm wrong) and if an image is larger it doesn't "stretch" the div, it simply overflows out of it

So one way to fix this is to add width: fit-content; to your element: https://jsfiddle.net/vanowm/h5yroe2q/

 function generateMeme(id, options){ window.scrollTo(0,0); html2canvas(document.querySelector("#theUserMeme"), options).then(canvas => { console.log(canvas); var image = canvas.toDataURL('image/jpeg', 1); console.log(image); document.getElementById(id || "finalImageCopy").src = image; }); } //generate first image generateMeme(); //generate second image with adding options to html2canvas generateMeme("finalImageCopy2", { width: document.querySelector("#theUserMeme").scrollWidth }); //set width document.querySelector("#theUserMeme").style.width = "fit-content"; //generate third image generateMeme("finalImageCopy3");

 body { width: 50px; } pre { width: fit-content; } pre > img { border: 2px solid red; }

 <script src="https://html2canvas.hertzen.com/dist/html2canvas.min.js"></script> <div class="container"> <div id="theUserMeme"> <div class="row"> <p id="memeWords"> When I see something lol </p> </div> <div class="row"> <img id = "memeImage" src="data:image/png;base64,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"> </div> </div> </div> <pre> Captured image: <img id="finalImageCopy"> Captured image manually set canvas width: <img id="finalImageCopy2"> Captured image with <b>width: fit-content</b>: <img id="finalImageCopy3"> </pre>