Crop

Rotate, flip, aspect ratio, straighten and perspective. You crop by dragging the frame on the photo.

"use client";

import { ImageEditorProvider } from "photocn/react";

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

export default function CropDemo() {
  return (
    <ImageEditorProvider src="/samples/street.jpg" defaultTool="compose">
      <div className="grid h-[520px] grid-rows-[1fr_auto] overflow-hidden rounded-xl border bg-background sm:grid-cols-[1fr_300px] sm:grid-rows-1">
        <ImageEditorCanvas className="min-h-0 p-2" />
        <aside className="max-h-60 overflow-y-auto border-t sm:max-h-none sm:border-t-0 sm:border-l">
          <ImageEditorCrop />
        </aside>
      </div>
    </ImageEditorProvider>
  );
}

Installation

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

Usage

import { ImageEditorCrop } from "@/components/image-editor/crop-panel";

// The canvas shows the crop frame while the "compose" tool is active.
<ImageEditorProvider src="/photo.jpg" defaultTool="compose">
  <ImageEditorCanvas />
  <ImageEditorCrop />
</ImageEditorProvider>

Props

Prop	Type	Description
`hidePerspective`	`boolean`	Hide the perspective controls.
`showShortcuts`	`boolean`	Show the list of keyboard shortcuts. Default `true`.
`onDone`	`() => void`	Called by the Done button. Default: go back to the previous tool.