Docs
- Getting Started
- Uppy
- Companion
- List of Plugins
- Common Plugin Options
- Custom Stores
- Community Projects
- Locale Packs
- Migration guides
UI Elements
Sources
- Drag & Drop
- Drop Target
- File Input
- Audio
- Webcam
- Screen capture
- Provider Plugins
- ⓒ Box
- ⓒ Dropbox
- ⓒ Google Drive
- ⓒ OneDrive
- ⓒ Zoom
- ⓒ Unsplash
- ⓒ Import From URL
Destinations
Miscellaneous
React
- Introduction
- <StatusBar />
- <DragDrop />
- <FileInput />
- <ProgressBar />
- <Dashboard />
- <DashboardModal />
- React Native
Other Integrations
Contributing
Image Editor
@uppy/image-editor
allows users to crop, rotate, zoom and flip images that are added to Uppy.
Designed to be used with the Dashboard UI (can in theory work without it).
import Uppy from '@uppy/core' import Dashboard from '@uppy/dashboard' import ImageEditor from '@uppy/image-editor' const uppy = new Uppy() uppy.use(Dashboard) uppy.use(ImageEditor, { target: Dashboard, quality: 0.8, }) |
Installation
This plugin is published as the @uppy/image-editor
package.
Install from NPM:
npm install @uppy/image-editor |
The @uppy/image-editor
plugin is in beta and is not yet available in the CDN package.
CSS
The @Uppy/image-editor
plugin requires the following CSS for styling:
import '@uppy/image-editor/dist/style.css' |
A minified version is also available as style.min.css
at the same path. Include this import after your import of the core stylesheet and the dashboard stylesheet.
Options
The @uppy/image-editor
plugin has the following configurable options:
uppy.use(ImageEditor, { id: 'ImageEditor', quality: 0.8, cropperOptions: { viewMode: 1, background: false, autoCropArea: 1, responsive: true, croppedCanvasOptions: {}, }, actions: { revert: true, rotate: true, granularRotate: true, flip: true, zoomIn: true, zoomOut: true, cropSquare: true, cropWidescreen: true, cropWidescreenVertical: true, }, }) |
id: 'ImageEditor'
A unique identifier for this plugin. It defaults to 'ImageEditor'
.
quality: 0.8
Quality of the resulting blob that will be saved in Uppy after editing/cropping.
cropperOptions
Image Editor is using the excellent Cropper.js.cropperOptions
will be directly passed to Cropper
and thus can expect the same values as documented
in their README,
with the addition of croppedCanvasOptions
, which will be passed to getCroppedCanvas
.
actions
Image Editor actions buttons, which will be shown. If you you’d like to hide any action pass false
to it. By default all the actions are visible.
Events
file-editor:start
Emitted when selectFile(file)
is called.
uppy.on('file-editor:start', (file) => { console.log(file) }) |
file-editor:complete
Emitted after save(blob)
is called.
uppy.on('file-editor:complete', (updatedFile) => { console.log(updatedFile) }) |
file-editor:cancel
Emitted when uninstall
is called or when the current image editing changes are discarded.
uppy.on('file-editor:cancel', (file) => { console.log(file) }) |
locale: {}
export default { strings: { revert: 'Revert', rotate: 'Rotate', zoomIn: 'Zoom in', zoomOut: 'Zoom out', flipHorizontal: 'Flip horizontal', aspectRatioSquare: 'Crop square', aspectRatioLandscape: 'Crop landscape (16:9)', aspectRatioPortrait: 'Crop portrait (9:16)', }, } |