useExport

Provides functions to export the canvas as a static image or a video file.

Import

import { useExport, downloadURI, downloadBlob } from '@asset-studio/core'

Usage

function ExportPanel() {
  const { exportImage, exportVideo, isExporting } = useExport()

  return (
    <div>
      <button onClick={() => downloadURI(exportImage(2), 'my-design.png')} disabled={isExporting}>
        Export PNG
      </button>
      <button
        onClick={async () => {
          const blob = await exportVideo(2, 30)
          if (blob) downloadBlob(blob, 'my-video.mp4')
        }}
        disabled={isExporting}
      >
        {isExporting ? 'Exporting...' : 'Export Video'}
      </button>
    </div>
  )
}

Return Value

Property / Function	Type	Description
isExporting	boolean	true while an export is in progress.
exportImage	(pixelRatio?: number) => string	Export the canvas as a PNG data URL.
exportVideo	(pixelRatio?: number, fps?: number) => Promise<Blob | null>	Export the canvas timeline as an MP4 blob.

exportImage Parameters

Parameter	Type	Default	Description
pixelRatio	number	1	Pixel density multiplier. Use 2 for Retina/2x output.

exportVideo Parameters

Parameter	Type	Default	Description
pixelRatio	number	1	Pixel density multiplier. Use 2 for Retina/2x output.
fps	number	30	Frames per second for the exported video.

Notes

• exportImage returns a PNG data URL — use downloadURI to trigger a download.
• exportVideo returns a Blob (or null on failure) — use downloadBlob to trigger a download.
• Video export uses the mediabunny engine and records each frame of the full timeline.

Related

• usePlayer — timeline control
• useStudio stageRef — direct Konva stage access