将 <div> 保存为图像：html-to-image 仅捕获 div 周围有透明空间

如何解决将 <div> 保存为图像：html-to-image 仅捕获 div 周围有透明空间

我在 Gatsby 中有一个页面，其中包含一个带有 div 的大 h1。我已经安装了 html-to-image 和 save-html-as-image（内部使用前者），并分别对这两个库进行了尝试。我正在尝试将蓝色 div + h1 转换为 png 图像。

代码如下：

import { saveAsPng,saveAsJpeg } from "save-html-as-image"

const IndexPage = () => {
  const convertToImage = id => {

    let node = document.getElementById(id)
    saveAsPng(node)

  }
  return (
    <Layout>
      <div>
        <div
          id="123"
          style={{ width: "600px",height: "900px",backgroundColor: "blue" }}
        >
          <h1>Hello World</h1>
        </div>
      </div>

      <button onClick={() => convertToImage("123")}>Download</button>
    </Layout>
  )
}
 
export default IndexPage

这是网站的截图：

但是，正在生成的图像看起来像这样（如果在 Mac OS 预览中打开）

所以它让我得到了正确的图像，但我不明白为什么它周围有这么多空间，这似乎是图像的一部分。我也试过不保存图片直接追加到DOM中，结果一样。它周围的空间似乎是透明的，但就在那里。

不确定我做错了什么？几个月前我有这个工作，现在刚刚打开这个项目，它有这个错误。实在想不通。

PS：如果有人能帮我把屏幕截图缩小一点，那就太好了

编辑：我只是在一个新的 create-react-app 中尝试了相同的代码，以确保它不是 gatsby 导致错误，并且它产生了相同的错误。