mirror of
https://github.com/transloadit/uppy.git
synced 2026-07-20 16:53:33 +00:00
53cb32f5d9
| Package | Version | Package | Version | | ---------------------- | ------------ | ---------------------- | ------------ | | @uppy/companion | 5.0.0-beta.6 | @uppy/status-bar | 4.0.0-beta.7 | | @uppy/companion-client | 4.0.0-beta.6 | @uppy/unsplash | 4.0.0-beta.6 | | @uppy/compressor | 2.0.0-beta.7 | @uppy/url | 4.0.0-beta.6 | | @uppy/core | 4.0.0-beta.7 | @uppy/utils | 6.0.0-beta.6 | | @uppy/dashboard | 4.0.0-beta.7 | @uppy/webcam | 4.0.0-beta.6 | | @uppy/dropbox | 4.0.0-beta.6 | @uppy/xhr-upload | 4.0.0-beta.4 | | @uppy/image-editor | 3.0.0-beta.4 | uppy | 4.0.0-beta.7 | | @uppy/screen-capture | 4.0.0-beta.5 | | | - @uppy/companion: switch from `node-redis` to `ioredis` (Dominik Schmidt / #4623) - meta: Fix headings in xhr.mdx (Merlijn Vos) - @uppy/xhr-upload: introduce hooks similar to tus (Merlijn Vos / #5094) - @uppy/core: close->destroy, clearUploadedFiles->clear (Merlijn Vos / #5154) - @uppy/companion-client,@uppy/dropbox,@uppy/screen-capture,@uppy/unsplash,@uppy/url,@uppy/webcam: Use `title` consistently from locales (Merlijn Vos / #5134) | Package | Version | Package | Version | | ------------------ | ------- | ------------------ | ------- | | @uppy/core | 3.11.3 | uppy | 3.25.3 | | @uppy/image-editor | 2.4.6 | | | - @uppy/image-editor: fix tooltips (Avneet Singh Malhotra / #5156) - meta: Remove redundant `plugins` prop from examples (Merlijn Vos / #5145) - @uppy/image-editor: Remove `target` option from examples and document consistently (Merlijn Vos / #5146) - @uppy/core: make getObjectOfFilesPerState more efficient (Merlijn Vos / #5155)
179 lines
3.7 KiB
Text
179 lines
3.7 KiB
Text
---
|
||
sidebar_position: 1
|
||
slug: /image-editor
|
||
---
|
||
|
||
import Tabs from '@theme/Tabs';
|
||
import TabItem from '@theme/TabItem';
|
||
|
||
import UppyCdnExample from '/src/components/UppyCdnExample';
|
||
|
||
# Image editor
|
||
|
||
Image editor. Designed to be used with the Dashboard UI.
|
||
|
||
<div style={{ maxWidth: 500 }}>
|
||
|
||
|
||
|
||
</div>
|
||
|
||
## When should I use this?
|
||
|
||
When you want to allow users to crop, rotate, zoom and flip images that are
|
||
added to Uppy.
|
||
|
||
## Install
|
||
|
||
<Tabs>
|
||
<TabItem value="npm" label="NPM" default>
|
||
|
||
```shell
|
||
npm install @uppy/core @uppy/dashboard @uppy/image-editor
|
||
```
|
||
|
||
</TabItem>
|
||
|
||
<TabItem value="yarn" label="Yarn">
|
||
|
||
```shell
|
||
yarn add @uppy/core @uppy/dashboard @uppy/image-editor
|
||
```
|
||
|
||
</TabItem>
|
||
|
||
<TabItem value="cdn" label="CDN">
|
||
<UppyCdnExample>
|
||
{`
|
||
import { Uppy, Dashboard, ImageEditor } from "{{UPPY_JS_URL}}"
|
||
const uppy = new Uppy()
|
||
uppy.use(Dashboard, { target: '#uppy', inline: true })
|
||
uppy.use(ImageEditor)
|
||
`}
|
||
</UppyCdnExample>
|
||
</TabItem>
|
||
</Tabs>
|
||
|
||
## Use
|
||
|
||
```js {3,7,11} showLineNumbers
|
||
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);
|
||
```
|
||
|
||
## API
|
||
|
||
### Options
|
||
|
||
:::info
|
||
|
||
If you automatically want to open the image editor when an image is added, see
|
||
the [`autoOpen`](/docs/dashboard#autoopen) Dashboard option.
|
||
|
||
:::
|
||
|
||
#### `id`
|
||
|
||
A unique identifier for this plugin (`string`, default: `'ImageEditor'`).
|
||
|
||
#### `quality`
|
||
|
||
Quality Of the resulting blob that will be saved in Uppy after editing/cropping
|
||
(`number`, default: `0.8`).
|
||
|
||
#### `cropperOptions`
|
||
|
||
Image Editor is using the excellent
|
||
[Cropper.js](https://fengyuanchen.github.io/cropperjs/). `cropperOptions` will
|
||
be directly passed to `Cropper` and thus can expect the same values as
|
||
documented in their
|
||
[README](https://github.com/fengyuanchen/cropperjs/blob/HEAD/README.md#options),
|
||
with the addition of `croppedCanvasOptions`, which will be passed to
|
||
[`getCroppedCanvas`](https://github.com/fengyuanchen/cropperjs/blob/HEAD/README.md#getcroppedcanvasoptions).
|
||
|
||
#### `actions`
|
||
|
||
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:
|
||
|
||
```js
|
||
{
|
||
revert: true,
|
||
rotate: true,
|
||
granularRotate: true,
|
||
flip: true,
|
||
zoomIn: true,
|
||
zoomOut: true,
|
||
cropSquare: true,
|
||
cropWidescreen: true,
|
||
cropWidescreenVertical: true,
|
||
}
|
||
```
|
||
|
||
#### `locale: {}`
|
||
|
||
```js
|
||
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)',
|
||
},
|
||
};
|
||
```
|
||
|
||
### Events
|
||
|
||
:::info
|
||
|
||
You can use [`on`](/docs/uppy#onevent-action) and
|
||
[`once`](/docs/uppy#onceevent-action) to listen to these events.
|
||
|
||
:::
|
||
|
||
#### `file-editor:start`
|
||
|
||
Emitted when `selectFile(file)` is called.
|
||
|
||
```js
|
||
uppy.on('file-editor:start', (file) => {
|
||
console.log(file);
|
||
});
|
||
```
|
||
|
||
#### `file-editor:complete`
|
||
|
||
Emitted after `save(blob)` is called.
|
||
|
||
```js
|
||
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.
|
||
|
||
```js
|
||
uppy.on('file-editor:cancel', (file) => {
|
||
console.log(file);
|
||
});
|
||
```
|