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
import { debounce } from '@ember/runloop';
// ...other imports
// ...in a controller or component
export default Controller.extend({
_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()`
});
},
actions: {
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 versionember 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 http://localhost:4200.
For more information on using ember-cli, visit https://ember-cli.com/.
This project is licensed under the MIT License.