我正试图转换后写的html，css到图像格式。然而，我遇到了一个问题，屏幕上出现了一行。我验证了它的出现是因为应用到div层的线性渐变。但是，我无法找出它背后的原因，使我无法修复它。我将分享我的html代码和两个图像，第一个是浏览器渲染的html，而后者是html 2canvas函数产生的输出。
我尝试过但没有成功的事情：

• 使背景透明
• 从渐变图层中移除边界
• 从渐变图层中删除轮廓
• 将透明边框添加到渐变层
• 添加了webkit和mozilla传统渐变

谢谢你的帮助！
注意：我使用的是ReactJS，输出的图片格式是. png

浏览器渲染HTML

x1c 0d1x的数据

使用html 2canvas输出图片

的
正如您所看到的，当应用的渐变停止时，该线刚好出现。
这里是HTML内容的源代码，以及使用html 2canvas将其转换为图像的过程。
超文本标记语言：

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

型