UiSvelte

ImageCropper

ImageCropper component allows users to select and crop a specific area of an image with drag-and-drop and resize functionality.

Preview

Image to crop

Builder

Aspect Ratio
Size Constraints
Min Width
Min Height
Max Width
Max Height
Image Source
Image URL

The component accepts the following props:

Prop
Type
Default
Title

Description Error

No data

There are no records to display

Features

  • Drag to Move: Click and drag the crop area to reposition it
  • Resize Handles: Eight handles for resizing from any corner or edge
  • Aspect Ratio Lock: Maintain specific proportions when resizing
  • Visual Grid: Rule of thirds guide appears on hover
  • Size Constraints: Set minimum and maximum crop dimensions
  • Reset Function: Restore the crop area to default position
  • Base64 Output: Returns cropped image as PNG data URL

Usage Examples

Basic Usage

<ImageCropper
  src="/photo.jpg"
  onCrop={(cropped) => console.log(cropped)}
/>

Square Crop (Profile Picture)

<ImageCropper
  src="/profile.jpg"
  aspectRatio={1}
  minWidth={100}
  minHeight={100}
  onCrop={handleCrop}
/>

Widescreen Crop (16:9)

<ImageCropper
  src="/banner.jpg"
  aspectRatio={16/9}
  minWidth={400}
  maxWidth={1920}
  onCrop={handleCrop}
/>

Portrait Crop (9:16)

<ImageCropper
  src="/story.jpg"
  aspectRatio={9/16}
  minWidth={200}
  minHeight={355}
  onCrop={handleCrop}
/>

Aspect Ratio Reference

  • 1 - Square (1:1) - Profile pictures, thumbnails
  • 16/9 (1.77...) - Widescreen - YouTube, presentations
  • 4/3 (1.33...) - Standard - Traditional photography
  • 3/4 (0.75) - Portrait - Prints, posters
  • 9/16 (0.56...) - Vertical - Instagram Stories, TikTok

Notes

  • The component automatically scales images to fit the container
  • Crop coordinates are calculated based on the original image dimensions
  • The cropped image is returned as a PNG data URL (base64)
  • Grid lines appear when hovering over the crop area
  • All resize handles are visible on hover for better precision

© 2025 UiSvelte