This addon provides a wrapper around Cropper.js as well as two yielded components for handling events and programatically calling methods on the cropper instance.

ember install ember-cropperjs

{{! app/templates/application.hbs }}
<ImageCropper
  @source="sinbad2_800x600.jpg"
  @options={{hash aspectRatio=1 viewMode=2}}
  as |cropper|
>
  <cropper.on @event="crop" @action={{this.crop}} />
</ImageCropper>

// app/controllers/application.ts
import Controller from '@ember/controller';
import { debounce } from '@ember/runloop';
import { action } from '@ember/object';
export default class ApplicationController extends Controller {
  _updateFileBlob(cropper) {
    return cropper
      .getCroppedCanvas({
        // any additional options
        maxWidth: 512,
        maxHeight: 512,
      })
      .toBlob((blob) => {
        // do something with the blob:
        // common examples include `blob.readAsDataURL()` or `blob.readAsArrayBuffer()`
      });
  }
  @action crop(cropper) {
    // debounce is optional
    debounce(this, this._updateFileBlob, cropper, 100);
  }
}

Note: Any options available from Cropper.js are available to be passed in to the options hash. There seems to be an issue with Cropper processing Ember's Empty Object, so the components/image-cropper.js file copies the options object as a work around.

• git clone <repository-url>
• cd my-addon
• yarn

• yarn run lint:js
• yarn run lint:js -- --fix

• ember test – Runs the test suite on the current Ember version
• ember test --server – Runs the test suite in "watch mode"
• ember try:each – Runs the test suite against multiple Ember versions

• ember serve
• Visit the dummy application at https://localhost:4200.

For more information on using ember-cli, visit https://ember-cli.com/.

This project is licensed under the MIT License.