Open1

html-to-image

ホホ
const [imageDataUrl, setImageDataUrl] = useState<string | null>(null)

const node = document.getElementById("id")

 const handleOnClick = async (node: HTMLElement | null) => {
    if (node) {
      try {
        const dataUrl = await htmlToImage.toPng(node, { pixelRatio: 2 })
        setImageDataUrl(dataUrl)
      } catch (error) {
        console.error("oops, something went wrong!", error)
      }
    } else {
      console.error("Element with id 'profile' not found.")
    }
  }

公式のコードを修正したらこうなる（var から const, then から awaitに変更）

画像にする部分を指定するIDは画像にしたい部分に付与する

      <div id={"id"}>
        <p>{"画像化"}</p>
      </div>

 const dataUrl = await htmlToImage.toPng(node, { pixelRatio: 2 })

{ pixelRatio: 2 }を追加すると生成された画像がハッキリ見える