Html2Canvas 额外线条出现在图像输出上（在 Mozilla 上）

Question

我正在尝试将帖子编写的 html、css 转换为图像格式。但是，我遇到了屏幕上出现的一条线的问题。我验证了它的出现是因为对 div 图层应用了线性渐变。但是，我无法弄清楚其背后的原因，使我无法修复它。我将分享我的html代码和两张图像，第一个是浏览器渲染的html，而后一个是html2canvas函数生成的输出。

我尝试过但没有成功的事情：

• 使背景透明
• 删除渐变层的边框
• 从渐变层中删除轮廓
• 为渐变图层添加透明边框
• 添加了 webkit 和 mozilla 遗留渐变

我感谢您的帮助！

注意：我使用的是ReactJS，图像的输出格式是.png

在浏览器上呈现的 HTML

使用html2canvas输出图像

如您所见，当应用的渐变停止时，线条就会出现。

这里是post的HTML内容的源代码以及使用html2canvas将其转换为图像的过程。

HTML：

 <div className="post">
    <div id="post__img" style={{backgroundImage: 'url(?)'.replace('?', imgPath), backgroundPosition: focusX + 'px ' + focusY + 'px'}}></div>
    <div id="post__grad-up"></div>
    <div id="post__grad-down"></div>
    <WiMoonWaxingCrescent1 id="post__moon"/>
    <div id="post__text-up">duhanews.com</div>
    <div id="post__line-up"></div>
    <div id="post__text-title" style={{fontSize: fontSize + 'px'}}>
        {title}
    </div>
    <div id="post__text-down">DİJİTAL ULUSLARARASI HABER AĞI</div>
    <div id="post__line-down"></div>

    <div id="post__social">
        <img src={instagram} alt=" " />
        <SocialIcon network="twitter" bgColor="transparent" fgColor="#1DA1F2"/>
    </div>

</div>

CSS：

.post {
    position: relative;
    width: 1080px;
    height: 1080px;
    font-family: var(--post-text);
}

#post__img {
    position: absolute;
    background-size: cover;
    width: 100%;
    height: 100%;
}

#post__grad-up {
    position: absolute;
    top: 0;
    width: 100%;
    height: 300px;

    background: linear-gradient(180deg, rgba(0, 0, 0, 1), rgba(0,0,0, 0));
    border: none;
    outline: none;
}

#post__grad-down {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 400px;

    background: linear-gradient(0deg, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));
    border: none;
    outline: none;
}

#post__moon {
    position: absolute;
    top: 35px;
    left: 10px;

    rotate: -120deg;
    color: #EBC815;
    font-size: 50px;
}

#post__text-up {
    position: absolute;
    top: 65px;
    left: 20px;

    width: 235px;
    font-size: 19px;
    letter-spacing: 0.15rem;
    font-weight: bold;
}

#post__line-up {
    position: absolute;
    top: 95px;
    left: 0;

    width: 198px;
    height: 1px;
    background-color: #fff;
}

#post__text-title {
    position: absolute;
    bottom: 110px;
    right: 50px;
    left: 50px;
    text-align: center;

}

#post__text-down {
    position: absolute;
    bottom: 35px;
    text-align: center;
    width: 100%;

    font-size: 21px;
    letter-spacing: 0.11rem;
    text-transform: uppercase;

}

#post__line-down {
    position: absolute;
    bottom: 75px;

    right: 267px;
    width: 546px;
    height: 1px;
    background-color: #fff;

}

#post__social {
    position: absolute;
    display: flex;
    align-items: center;
    right: 0;
    bottom: 0;
    padding: 16px;
}

#post__social img {
    width: 30px;
    height: 30px;
}

图像转换：

 <button type='button' onClick={() => {
        html2canvas(document.querySelector(".post"), {scale: 1}).then(
            (canvas) => {
                var link = document.createElement("a");
                document.body.appendChild(link);
                link.download = "gönderi.jpg";
                link.href = canvas.toDataURL();
                link.target = '_blank';
                link.click();
            }
        )
    }}>Kaydet</button>

Answer 1

我不知道技术原因，但从 Mozilla 切换到 Chrome 后，问题解决了，并且该行没有出现。然而，它仍然存在于 Mozilla 上。它一定与 Mozilla 渲染渐变的方式有关。