Export

SealKit exports seals as PNG data URLs through the SealCanvas ref.

Exporting PNG

import { useRef } from 'react'
import { SealCanvas, type SealCanvasRef } from '@luohuax/seal-kit'

function App() {
  const sealRef = useRef<SealCanvasRef>(null)

  const handleExport = async () => {
    const dataUrl = await sealRef.current?.exportPng({
      width: 1024,
      height: 1024,
      transparent: true
    })

    console.log(dataUrl)
  }

  return (
    <>
      <SealCanvas ref={sealRef} preset="mitomein" text="山田太郎" />
      <button onClick={handleExport}>Export PNG</button>
    </>
  )
}

Export Options

Option	Type	Default	Description
width	number	1024	Output width in pixels.
height	number	width	Output height in pixels.
transparent	boolean	true	Whether the background is transparent.

Downloading the Image

Convert the data URL to a downloadable file:

const handleDownload = async () => {
  const dataUrl = await sealRef.current?.exportPng({ width: 2048 })

  if (dataUrl) {
    const link = document.createElement('a')
    link.href = dataUrl
    link.download = 'hanko.png'
    link.click()
  }
}

High Resolution Output

For print or official documents, export at 2048 px:

await sealRef.current?.exportPng({ width: 2048, transparent: true })

Other Formats

The TypeScript types include ExportFormat = "png" | "pdf" | "svg". Currently exportPng is the primary supported method. PDF and SVG exports are planned for future releases.