Export

Choose the format, quality and size, then download or save.

"use client";

import { ImageEditorProvider } from "photocn/react";

import { ImageEditorCanvas } from "@/components/image-editor/canvas";
import { ImageEditorExportDialog } from "@/components/image-editor/export-dialog";

export default function ExportDemo() {
  return (
    <ImageEditorProvider src="/samples/portrait.jpg">
      <div className="relative h-[420px] overflow-hidden rounded-xl border bg-background">
        <ImageEditorCanvas className="p-2" />
        <div className="absolute top-4 right-4">
          <ImageEditorExportDialog
            onSave={async ({ blob, filename }) => {
              // Upload it anywhere, e.g. await fetch("/api/photos", { method: "POST", body: blob })
              console.log("save", filename, blob.size);
            }}
          />
        </div>
      </div>
    </ImageEditorProvider>
  );
}

Installation

pnpm dlx shadcn@latest add @photocn/image-editor-export

Usage

import { ImageEditorExportDialog } from "@/components/image-editor/export-dialog";

<ImageEditorExportDialog onSave={async ({ blob }) => upload(blob)} />

Props

Prop	Type	Description
`trigger`	`ReactNode`	The button that opens it. Default: an Export button.
`defaultFormat`	`"png" \| "jpeg" \| "webp"`	Default `"png"`.
`onSave`	`(result) => Promise<void>`	Adds a Save button, e.g. to upload the image.
`saveLabel`	`string`	Label for the Save button.
`hideDownload`	`boolean`	Hide the Download button.
`open / onOpenChange`	`boolean`	Control whether it's open.