Exporting Canvas

Overview

ExportManager provides image and SVG exports for the current canvas. Raster exports (PNG/JPEG/WebP) are generated from the Konva stage, while SVG export produces SVG markup that embeds a rasterized snapshot to preserve complex visuals like masks, text, and images.

Access in the Editor

const exportManager = editor.exportManager

Methods

exportAsImage

exportAsImage(options?: ExportOptions): string

Exports the full canvas as a data URL (data:image/...). Supported raster formats are png, jpeg, and webp.

exportAsBlob

exportAsBlob(options?: ExportOptions): Promise<Blob>

Exports the full canvas as a Blob for binary workflows.

exportSelection

exportSelection(bounds: ExportBounds, options?: ExportOptions): string

Exports a rectangular selection region as a raster data URL.

exportSelectionAsBlob

exportSelectionAsBlob(bounds: ExportBounds, options?: ExportOptions): Promise<Blob>

Exports a selection as a Blob.

exportAsSVG

exportAsSVG(): string

Returns SVG markup that embeds a raster snapshot inside an <image> tag. This ensures complex rendering (masks, text, images, and effects) remains visually consistent.

Events

exportManager.on('export:completed', ({ format, outputType, source }) => {
  console.log(format, outputType, source)
})

Example

const bounds = { x: 0, y: 0, width: 800, height: 600 }
const dataUrl = exportManager.exportSelection(bounds, { format: 'png', pixelRatio: 2 })

const svgMarkup = exportManager.exportAsSVG()

Notes

• SVG export embeds a raster snapshot for fidelity; it is not a pure vector export.
• Raster exports temporarily hide non-exportable layers and restore selection afterward.