Image editor

Image editor. Designed to be used with the Dashboard UI.

When should I use this?

When you want to allow users to crop, rotate, zoom and flip images that are added to Uppy.

Install

NPM

npm install @uppy/core @uppy/dashboard @uppy/image-editor

Yarn

yarn add @uppy/core @uppy/dashboard @uppy/image-editor

CDN

caution

The bundle consists of most Uppy plugins, so this method is not recommended for production, as your users will have to download all plugins when you are likely using only a few.

It can be useful to speed up your development environment, so don't hesitate to use it to get you started.

<!-- 1. Add CSS to `<head>` -->
<link href="https://releases.transloadit.com/uppy/v5.2.1/uppy.min.css" rel="stylesheet">

<!-- 2. Initialize -->
<div id="uppy"></div>

<script type="module">
  import { Uppy, Dashboard, ImageEditor } from "https://releases.transloadit.com/uppy/v5.2.1/uppy.min.mjs"
  const uppy = new Uppy()
  uppy.use(Dashboard, { target: '#uppy', inline: true })
  uppy.use(ImageEditor)
</script>

Use

import Uppy from '@uppy/core';
import Dashboard from '@uppy/dashboard';
import ImageEditor from '@uppy/image-editor';

import '@uppy/core/css/style.min.css';
import '@uppy/dashboard/css/style.min.css';
import '@uppy/image-editor/css/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 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. 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

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,
}

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)',
	},
};

Events

info

You can use on and once to listen to these 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);
});