Awesome
ember-cropperjs
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.
Installation
ember install ember-cropperjs
Usage
{{! 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.
Contributing
Installation
git clone <repository-url>
cd my-addon
yarn
Linting
yarn run lint:js
yarn run lint:js -- --fix
Running tests
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
Running the dummy application
ember serve
- Visit the dummy application at http://localhost:4200.
For more information on using ember-cli, visit https://ember-cli.com/.
License
This project is licensed under the MIT License.