Maofeng
34 lines
1.3 KiB
Plaintext
34 lines
1.3 KiB
Plaintext
---
|
|
title: Overview
|
|
description: Pan, zoom, calculate, and export image crops in React.
|
|
order: 1
|
|
toc:
|
|
- id: package-role
|
|
title: Package role
|
|
- id: capabilities
|
|
title: Capabilities
|
|
- id: data-model
|
|
title: Data model
|
|
---
|
|
|
|
## Package role {#package-role}
|
|
|
|
`@workspace/cropper` provides fixed-viewport image cropping. Users move and scale an image inside the viewport while the component reports the crop in source-image pixels. It owns interaction and geometry, but does not upload, store, or mutate the original file.
|
|
|
|
## Capabilities {#capabilities}
|
|
|
|
- Mouse and touch dragging.
|
|
- Pinch, wheel, double-click, and keyboard zooming.
|
|
- Controlled and uncontrolled state.
|
|
- Rectangular and circular viewports.
|
|
- Numeric and `"width:height"` viewport ratios.
|
|
- URL and local `Blob` image sources with automatic object URL cleanup.
|
|
- Resize-aware image constraints.
|
|
- Standalone pure geometry functions.
|
|
- Imperative reset, crop-area access, and export through a component ref.
|
|
- Canvas export to PNG, JPEG, or WebP Blob/base64 output.
|
|
|
|
## Data model {#data-model}
|
|
|
|
In `CropperValue`, `x` and `y` are CSS-pixel offsets from the viewport center and `zoom` is relative to the cover fit. `CropArea` uses source-image pixels, so it can be sent to an image service or passed directly to `cropImage()` for browser-side export.
|