Image Editor

@sme-uploader/image-editor allows users to crop, rotate, zoom and flip images that are added to SME Uploader.

Designed to be used with the Dashboard UI (can in theory work without it).

Image Editor plugin

const SmeUploader = require('@sme-uploader/core')
const Dashboard = require('@sme-uploader/dashboard')
const ImageEditor = require('@sme-uploader/image-editor')

const uploader = new SmeUploader()
uploader.use(Dashboard)
uploader.use(ImageEditor, {
  target: Dashboard,
  quality: 0.8
})

Installation

This plugin is published as the @sme-uploader/image-editor package.

Install from NPM:

npm install @sme-uploader/image-editor

The @sme-uploader/image-editor plugin is in beta and is not yet available in the CDN package.

CSS

The @sme-uploader/image-editor plugin requires the following CSS for styling:

import '@sme-uploader/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 @sme-uploader/image-editor plugin has the following configurable options:

uploader.use(ImageEditor, {
  id: 'ImageEditor',
  quality: 0.8,
  cropperOptions: {
    viewMode: 1,
    background: false,
    autoCropArea: 1,
    responsive: true
  }
})

id: 'ImageEditor'

A unique identifier for this plugin. It defaults to 'ThumbnailGenerator'.

quality: 0.8

Quality of the resulting blob that will be saved in SME Uploader after editing/cropping.

cropperOptions

Image Editor is using the excellent Cropper.js, and if you’d like to fine tune the Cropper.js instance, you can pass options to it.

Events

file-editor:start

Emitted when selectFile(file) is called.

uploader.on('file-editor:start', (file) => {
  console.log(file)
})

file-editor:complete

Emitted after save(blob) is called.

uploader.on('file-editor:complete', (updatedFile) => {
  console.log(updatedFile)
})
Found a mistake or want to help improve this documentation? Edit/fork this page directly on Github