Canvas

Shows the photo. In the crop tool it shows the crop frame, and everywhere else the edited result.

"use client";

import { ImageEditorProvider } from "photocn/react";

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

// Scroll with ⌘/Ctrl or pinch to zoom · press and hold to see the original ·
// drop another photo onto it.
export default function CanvasDemo() {
  return (
    <ImageEditorProvider src="/samples/mountain-lake.jpg">
      <ImageEditorCanvas className="h-[420px] rounded-xl border p-2" />
    </ImageEditorProvider>
  );
}

Installation

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

Usage

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

<ImageEditorProvider src="/photo.jpg">
  <ImageEditorCanvas className="h-96" />
</ImageEditorProvider>

Props

Prop	Type	Description
`className`	`string`	Classes for the outer element.
`alt`	`string`	Accessible name for the image.
`allowDrop`	`boolean`	Open images dropped onto it. Default `true`.
`showOpenButton`	`boolean`	Show the Open button when there's no image. Default `true`.
`emptyState`	`ReactNode`	What to show before an image is loaded.
`padding`	`number`	Space around the photo in px. Default 24.
`children`	`ReactNode`	Your own layers, drawn over the photo.