Export PNG

This example shows how to export a seal as a transparent PNG and trigger a download.

Example

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

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

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

    if (!dataUrl) return

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

  return (
    <div>
      <SealCanvas
        ref={sealRef}
        preset="mitomein"
        text="山田太郎"
        size={240}
      />
      <button onClick={handleDownload}>
        Download PNG
      </button>
    </div>
  )
}

Result

Clicking the button exports a 2048 × 2048 transparent PNG and starts a download.

Options

await sealRef.current?.exportPng({
  width: 1024,      // output width
  height: 1024,     // output height (defaults to width)
  transparent: true // transparent background
})

Tips

• Use 1024 px for web use and 2048 px for print-quality output.
• Keep transparent: true when placing the seal on documents.
• For PDF workflows, you can embed the PNG or wait for future built-in PDF export support.