sidebar_position | slug |
---|---|
1 |
/image-editor |
import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem';
import UppyCdnExample from '/src/components/UppyCdnExample';
Image editor. Designed to be used with the Dashboard UI.
When you want to allow users to crop, rotate, zoom and flip images that are added to Uppy.
npm install @uppy/core @uppy/dashboard @uppy/image-editor
yarn add @uppy/core @uppy/dashboard @uppy/image-editor
import Uppy from '@uppy/core';
import Dashboard from '@uppy/dashboard';
import ImageEditor from '@uppy/image-editor';
import '@uppy/core/dist/style.min.css';
import '@uppy/dashboard/dist/style.min.css';
import '@uppy/image-editor/dist/style.min.css';
new Uppy()
.use(Dashboard, { inline: true, target: '#dashboard' })
.use(ImageEditor);
:::info
If you automatically want to open the image editor when an image is added, see
the autoOpen
Dashboard option.
:::
A unique identifier for this plugin (string
, default: 'ImageEditor'
).
Quality Of the resulting blob that will be saved in Uppy after editing/cropping
(number
, default: 0.8
).
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
.
Show action buttons (Object
or boolean
).
If you you’d like to hide all actions, pass false
to it. By default all the
actions are visible. Or enable/disable them individually:
{
revert: true,
rotate: true,
granularRotate: true,
flip: true,
zoomIn: true,
zoomOut: true,
cropSquare: true,
cropWidescreen: true,
cropWidescreenVertical: true,
}
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)',
},
};
:::info
You can use on
and
once
to listen to these events.
:::
Emitted when selectFile(file)
is called.
uppy.on('file-editor:start', (file) => {
console.log(file);
});
Emitted after save(blob)
is called.
uppy.on('file-editor:complete', (updatedFile) => {
console.log(updatedFile);
});
Emitted when uninstall
is called or when the current image editing changes are
discarded.
uppy.on('file-editor:cancel', (file) => {
console.log(file);
});