# Export

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

```tsx
"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

```bash
npx shadcn@latest add @photocn/image-editor-export
```

## Usage

```tsx
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. |