时间戳

首页 > 解决方案 > 使用 html2canvas 捕获的 HTML div 未满

javascript - 使用 html2canvas 捕获的 HTML div 未满

问题描述

我正在使用来自https://html2canvas.hertzen.com/的 html2canvas 库在 meme 编辑器网站上工作

这是我div需要捕获的 html 代码：

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

此外，这是我运行以捕获的 JavaScript 代码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;
    });


}

在 Github 上托管代码后，我在 iPhone 和笔记本电脑上尝试了该页面。它在两种设备上都运行良好，但之后它只能在手机上运行。当我在桌面上使用它时，捕获的图像不完整，有时它只是白色图像。

可能是什么问题？

标签： javascripthtmlhtml2canvas

解决方案

默认情况下，a 的宽度似乎<div>等于可见区域的宽度（如果我错了，请正确），如果图像更大，它不会“拉伸”div，它只会溢出它

所以解决这个问题的一种方法是添加width: fit-content;到你的元素中： 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>

推荐阅读