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
- Yarn
- CDN
npm install @uppy/core @uppy/dashboard @uppy/image-editor
yarn add @uppy/core @uppy/dashboard @uppy/image-editor
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/v3.24.3/uppy.min.css" rel="stylesheet">
<!-- 2. Initialize -->
<div id="uppy"></div>
<script type="module">
import { Uppy, Dashboard, ImageEditor } from "https://releases.transloadit.com/uppy/v3.24.3/uppy.min.mjs"
const uppy = new Uppy()
uppy.use(Dashboard, { target: '#uppy', inline: true })
uppy.use(ImageEditor, { target: Uppy.Dashboard })
</script>
Use
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, { target: Dashboard });