javascript - Saving <div> as image: html-to-image captures div only with transparent space around it

Question

I have a page in Gatsby, which holds a big div with a h1. I have installed html-to-image as well as save-html-as-image (which internally uses the former) and tried this with both libraries separately. I am trying to convert the blue div + h1 into a png image.

Here is the code:

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

And here is a screenshot of the site:

However, the image that is being generated looks like this (if opened in Mac OS Preview)

So it gets me the correct image, but I don't understand why there is so much space around it, which seems to be a part of the image. I also tried it without saving the image and appended it directly into the DOM, and the result is the same. The space around it seems to be transparent, but is there.

Not sure what I am doing wrong? I had this working a few months ago, now just opened this project and it has this error. Can't figure it out really.

PS: If somebody could help me to make the screenshots a bit smaller, that would be great

EDIT: I just tried the same code in a new create-react-app, to make sure it's not gatsby thats causing the error, and it produces the same error.

Answer 1

等待大神答复