Skip to content
Ember-cli addon for cropping/resizing images based on the jQuery Cropper plugin.
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.
addon added data prop for defaulting crop data May 24, 2018
app renamed to ember-cli-image-cropper Apr 4, 2015
config Update ember and ember-cli Jul 29, 2017
vendor removing jquery dependency Mar 22, 2018
.bowerrc initial commit Mar 30, 2015
.ember-cli initial commit Mar 30, 2015
.eslintrc.js Update ember, move cropper to npm May 6, 2017
.npmignore Update ember, move cropper to npm May 6, 2017
.travis.yml Update .travis.yml Jan 29, 2018
bower.json Update ember, move cropper to npm May 6, 2017
cropper.sublime-workspace initial commit Mar 30, 2015
ember-cli-build.js problem when cropping image more than once fixed Mar 22, 2018
index.js fastboot-transform added to the build Apr 18, 2018
package.json 0.0.14 Aug 30, 2018
testem.js Try to fix travis Apr 11, 2018
yarn.lock Move htmlbars to deps only Jul 29, 2017

Ember CLI Image Cropper Build Status

This Ember CLI addon that wraps the jQuery Cropper into an ember component.

It requires cropper


For ember-cli 1.13.1 and above. use ember-cli-image-cropper version 0.0.7 and beyond. To install it just use

# install via ember-cli
$ ember install ember-cli-image-cropper

For ember-cli 0.2.7 and below use ember-cli-image-cropper version 0.0.6 and install it using:

# install via ember-cli
$ ember install:addon ember-cli-image-cropper


The component initialises cropper when the image is loaded. To use it, extend the component and change the default to your preference. Currently no methods are provided by the addon. To do this you have to use the default cropper methods. For more about available methods checkout Cropper.

An example below show how to extend the component and get the cropped canvas area.


// app/components/avatar-cropper.js
import ImageCropper from 'ember-cli-image-cropper/components/image-cropper';

export default ImageCropper.extend({
  //override default options of cropper
  aspectRatio: 1,
  minCropBoxWidth: 100,
  minCropBoxHeight: 100,
  cropperContainer: '.cropper-container > img',
  previewClass: '.img-preview',
  croppedAvatar: null,

  actions: {
    getCroppedAvatar() {
      var croppedImage = this.get('cropper').getCroppedCanvas();
      this.set('croppedAvatar', croppedImage);

please note that in the extended component's template you should have an image tag inside a DOM element with a class 'cropper-container' Other wise, you chould also override the default cropperContainer : '.cropper-container > img'

Default Options

Cropper's default options are rewritten in the component as following.

previewClass: '.cropper-preview',
cropperContainer: '.cropper-container > img',
aspectRatio: 16 / 9,
crop: null,
viewMode: 0, // default crop box is within the container other options (1,2,3) check cropper documentation for more.
dragMode: 'crop',  // default crop. other options are 'move' and 'none'
responsive: true,
checkCrossOrigin: true,
background: true,
modal: true,
guides: true,
highlight: true,
autoCrop: true,
autoCropArea: 0.8,
dragDrop: true,
movable: true,
resizable: true,
zoomable: true,
zoomOnWheel: true,
zoomOnTouch: true,
toggleDragModeOnDblclick: true,
rotateable: true,
minContainerWidth: 200,
minContainerHeight: 100,
minCropBoxWidth: 0,
minCropBoxHeight: 0,
build: null,
built: null,
dragStart: null,
dragMove: null,
dragEnd: null,
zoomin: null,
zoomout: null,
ready: null,
data: null

For more options and methods, please check cropper's README.

You can’t perform that action at this time.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.