ngx-croppie
Version:
Simple angular wrapper around croppie (WIP)
120 lines (114 loc) • 8.02 kB
JavaScript
import { Component, Input, EventEmitter, Output, ViewChild, NgModule } from '@angular/core';
import * as Croppie from 'croppie';
import { CommonModule } from '@angular/common';
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
class NgxCroppieComponent {
constructor() {
this.outputFormatOptions = { type: 'base64', size: 'viewport' };
this.defaultZoom = 0;
this.result = new EventEmitter();
}
/**
* @return {?}
*/
get imageUrl() {
return this.imgUrl;
}
/**
* @param {?} url
* @return {?}
*/
set imageUrl(url) {
if (this.imgUrl === url) {
return;
}
this.imgUrl = url;
if (this._croppie) {
this.bindToCroppie(this.imageUrl, this.points, this.defaultZoom);
}
}
/**
* @return {?}
*/
ngOnInit() {
this._croppie = new Croppie(this.imageEdit.nativeElement, this.croppieOptions);
this.bindToCroppie(this.imageUrl, this.points, this.defaultZoom);
}
/**
* @param {?} url
* @param {?} points
* @param {?} zoom
* @return {?}
*/
bindToCroppie(url, points, zoom) {
this._croppie.bind({ url, points, zoom });
}
/**
* @return {?}
*/
newResult() {
this._croppie.result(this.outputFormatOptions).then((res) => {
this.result.emit(res);
});
}
/**
* @param {?} degrees
* @return {?}
*/
rotate(degrees) {
this._croppie.rotate(degrees);
}
/**
* @return {?}
*/
get() {
return this._croppie.get();
}
}
NgxCroppieComponent.decorators = [
{ type: Component, args: [{
// tslint:disable-next-line:component-selector
selector: 'ngx-croppie',
template: `<div #imageEdit (update)="newResult()"></div>`
},] },
];
/** @nocollapse */
NgxCroppieComponent.propDecorators = {
"imageEdit": [{ type: ViewChild, args: ['imageEdit',] },],
"croppieOptions": [{ type: Input },],
"points": [{ type: Input },],
"outputFormatOptions": [{ type: Input },],
"defaultZoom": [{ type: Input },],
"result": [{ type: Output },],
"imageUrl": [{ type: Input },],
};
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
class NgxCroppieModule {
}
NgxCroppieModule.decorators = [
{ type: NgModule, args: [{
imports: [
CommonModule
],
declarations: [NgxCroppieComponent],
exports: [
NgxCroppieComponent
]
},] },
];
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
export { NgxCroppieComponent, NgxCroppieModule };
//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibmd4LWNyb3BwaWUuanMubWFwIiwic291cmNlcyI6WyJuZzovL25neC1jcm9wcGllL3NyYy9hcHAvbW9kdWxlcy9uZ3gtY3JvcHBpZS9uZ3gtY3JvcHBpZS5jb21wb25lbnQudHMiLCJuZzovL25neC1jcm9wcGllL3NyYy9hcHAvbW9kdWxlcy9uZ3gtY3JvcHBpZS9uZ3gtY3JvcHBpZS5tb2R1bGUudHMiXSwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ29tcG9uZW50LCBPbkluaXQsIElucHV0LCBFdmVudEVtaXR0ZXIsIE91dHB1dCwgVmlld0NoaWxkLCBFbGVtZW50UmVmIH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5cbmltcG9ydCAqIGFzIENyb3BwaWUgZnJvbSAnY3JvcHBpZSc7XG5pbXBvcnQgeyBDcm9wcGllT3B0aW9ucywgUmVzdWx0T3B0aW9ucywgQ3JvcERhdGEgfSBmcm9tICdjcm9wcGllJztcblxuZXhwb3J0IHR5cGUgVHlwZSA9ICdjYW52YXMnIHwgJ2Jhc2U2NCcgfCAnaHRtbCcgfCAnYmxvYicgfCAncmF3Y2FudmFzJztcblxuQENvbXBvbmVudCh7XG5cdC8vIHRzbGludDpkaXNhYmxlLW5leHQtbGluZTpjb21wb25lbnQtc2VsZWN0b3Jcblx0c2VsZWN0b3I6ICduZ3gtY3JvcHBpZScsXG5cdHRlbXBsYXRlOiBgPGRpdiAjaW1hZ2VFZGl0ICh1cGRhdGUpPVwibmV3UmVzdWx0KClcIj48L2Rpdj5gXG59KVxuZXhwb3J0IGNsYXNzIE5neENyb3BwaWVDb21wb25lbnQgaW1wbGVtZW50cyBPbkluaXQge1xuXHRAVmlld0NoaWxkKCdpbWFnZUVkaXQnKSBpbWFnZUVkaXQ6IEVsZW1lbnRSZWY7XG5cdEBJbnB1dCgpIGNyb3BwaWVPcHRpb25zOiBDcm9wcGllT3B0aW9ucztcblx0QElucHV0KCkgcG9pbnRzOiBudW1iZXJbXTtcblx0QElucHV0KCkgb3V0cHV0Rm9ybWF0T3B0aW9uczogUmVzdWx0T3B0aW9ucyA9IHsgdHlwZTogJ2Jhc2U2NCcsIHNpemU6ICd2aWV3cG9ydCcgfTtcblx0QElucHV0KCkgZGVmYXVsdFpvb20gPSAwO1xuXHRAT3V0cHV0KCkgcmVzdWx0OiBFdmVudEVtaXR0ZXI8c3RyaW5nIHwgSFRNTEVsZW1lbnQgfCBCbG9iIHwgSFRNTENhbnZhc0VsZW1lbnQ+XG5cdFx0PSBuZXcgRXZlbnRFbWl0dGVyPHN0cmluZyB8IEhUTUxFbGVtZW50IHwgQmxvYiB8IEhUTUxDYW52YXNFbGVtZW50PigpO1xuXHRwcml2YXRlIF9jcm9wcGllOiBDcm9wcGllO1xuXHRwcml2YXRlIGltZ1VybDogc3RyaW5nO1xuXHRnZXQgaW1hZ2VVcmwoKTogc3RyaW5nIHtcblx0XHRyZXR1cm4gdGhpcy5pbWdVcmw7XG5cdH1cblx0QElucHV0KCkgc2V0IGltYWdlVXJsKHVybDogc3RyaW5nKSB7XG5cdFx0aWYodGhpcy5pbWdVcmwgPT09IHVybCkgeyByZXR1cm47IH1cblx0XHR0aGlzLmltZ1VybCA9IHVybDtcblx0XHRpZiAodGhpcy5fY3JvcHBpZSkge1xuXHRcdFx0dGhpcy5iaW5kVG9Dcm9wcGllKHRoaXMuaW1hZ2VVcmwsIHRoaXMucG9pbnRzLCB0aGlzLmRlZmF1bHRab29tKTtcblx0XHR9XG5cdH1cblxuXHRuZ09uSW5pdCgpOiB2b2lkIHtcblx0XHR0aGlzLl9jcm9wcGllID0gbmV3IENyb3BwaWUodGhpcy5pbWFnZUVkaXQubmF0aXZlRWxlbWVudCwgdGhpcy5jcm9wcGllT3B0aW9ucyk7XG5cdFx0dGhpcy5iaW5kVG9Dcm9wcGllKHRoaXMuaW1hZ2VVcmwsIHRoaXMucG9pbnRzLCB0aGlzLmRlZmF1bHRab29tKTtcblx0fVxuXG5cdHByaXZhdGUgYmluZFRvQ3JvcHBpZSh1cmw6IHN0cmluZywgcG9pbnRzOiBudW1iZXJbXSwgem9vbTogbnVtYmVyKXtcblx0XHR0aGlzLl9jcm9wcGllLmJpbmQoeyB1cmwsIHBvaW50cywgem9vbSB9KTtcblx0fVxuXG5cdG5ld1Jlc3VsdCgpIHtcblx0XHR0aGlzLl9jcm9wcGllLnJlc3VsdCh0aGlzLm91dHB1dEZvcm1hdE9wdGlvbnMpLnRoZW4oKHJlcykgPT4ge1xuXHRcdFx0dGhpcy5yZXN1bHQuZW1pdChyZXMpO1xuXHRcdH0pO1xuXHR9XG5cblx0cm90YXRlKGRlZ3JlZXM6IDkwIHwgMTgwIHwgMjcwIHwgLTkwIHwgLTE4MCB8IC0yNzApIHtcblx0XHR0aGlzLl9jcm9wcGllLnJvdGF0ZShkZWdyZWVzKTtcblx0fVxuXG5cdGdldCgpOiBDcm9wRGF0YSB7XG5cdFx0cmV0dXJuIHRoaXMuX2Nyb3BwaWUuZ2V0KCk7XG5cdH1cblxufVxuIiwiaW1wb3J0IHsgTmdNb2R1bGUgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7IENvbW1vbk1vZHVsZSB9IGZyb20gJ0Bhbmd1bGFyL2NvbW1vbic7XG5pbXBvcnQgeyBOZ3hDcm9wcGllQ29tcG9uZW50IH0gZnJvbSAnLi9uZ3gtY3JvcHBpZS5jb21wb25lbnQnO1xuXG5ATmdNb2R1bGUoe1xuICBpbXBvcnRzOiBbXG4gICAgQ29tbW9uTW9kdWxlXG4gIF0sXG4gIGRlY2xhcmF0aW9uczogW05neENyb3BwaWVDb21wb25lbnRdLFxuICBleHBvcnRzOiBbXG4gICAgTmd4Q3JvcHBpZUNvbXBvbmVudFxuICBdXG59KVxuZXhwb3J0IGNsYXNzIE5neENyb3BwaWVNb2R1bGUgeyB9XG4iXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6Ijs7Ozs7Ozs7QUFBQTs7bUNBZ0IrQyxFQUFFLElBQUksRUFBRSxRQUFRLEVBQUUsSUFBSSxFQUFFLFVBQVUsRUFBRTsyQkFDM0QsQ0FBQztzQkFFckIsSUFBSSxZQUFZLEVBQW1EOzs7OztJQUd0RSxJQUFJLFFBQVE7UUFDWCxPQUFPLElBQUksQ0FBQyxNQUFNLENBQUM7S0FDbkI7Ozs7O1FBQ1ksUUFBUSxDQUFDLEdBQVc7UUFDaEMsSUFBRyxJQUFJLENBQUMsTUFBTSxLQUFLLEdBQUcsRUFBRTtZQUFFLE9BQU87U0FBRTtRQUNuQyxJQUFJLENBQUMsTUFBTSxHQUFHLEdBQUcsQ0FBQztRQUNsQixJQUFJLElBQUksQ0FBQyxRQUFRLEVBQUU7WUFDbEIsSUFBSSxDQUFDLGFBQWEsQ0FBQyxJQUFJLENBQUMsUUFBUSxFQUFFLElBQUksQ0FBQyxNQUFNLEVBQUUsSUFBSSxDQUFDLFdBQVcsQ0FBQyxDQUFDO1NBQ2pFOzs7OztJQUdGLFFBQVE7UUFDUCxJQUFJLENBQUMsUUFBUSxHQUFHLElBQUksT0FBTyxDQUFDLElBQUksQ0FBQyxTQUFTLENBQUMsYUFBYSxFQUFFLElBQUksQ0FBQyxjQUFjLENBQUMsQ0FBQztRQUMvRSxJQUFJLENBQUMsYUFBYSxDQUFDLElBQUksQ0FBQyxRQUFRLEVBQUUsSUFBSSxDQUFDLE1BQU0sRUFBRSxJQUFJLENBQUMsV0FBVyxDQUFDLENBQUM7S0FDakU7Ozs7Ozs7SUFFTyxhQUFhLENBQUMsR0FBVyxFQUFFLE1BQWdCLEVBQUUsSUFBWTtRQUNoRSxJQUFJLENBQUMsUUFBUSxDQUFDLElBQUksQ0FBQyxFQUFFLEdBQUcsRUFBRSxNQUFNLEVBQUUsSUFBSSxFQUFFLENBQUMsQ0FBQzs7Ozs7SUFHM0MsU0FBUztRQUNSLElBQUksQ0FBQyxRQUFRLENBQUMsTUFBTSxDQUFDLElBQUksQ0FBQyxtQkFBbUIsQ0FBQyxDQUFDLElBQUksQ0FBQyxDQUFDLEdBQUc7WUFDdkQsSUFBSSxDQUFDLE1BQU0sQ0FBQyxJQUFJLENBQUMsR0FBRyxDQUFDLENBQUM7U0FDdEIsQ0FBQyxDQUFDO0tBQ0g7Ozs7O0lBRUQsTUFBTSxDQUFDLE9BQTJDO1FBQ2pELElBQUksQ0FBQyxRQUFRLENBQUMsTUFBTSxDQUFDLE9BQU8sQ0FBQyxDQUFDO0tBQzlCOzs7O0lBRUQsR0FBRztRQUNGLE9BQU8sSUFBSSxDQUFDLFFBQVEsQ0FBQyxHQUFHLEVBQUUsQ0FBQztLQUMzQjs7O1lBL0NELFNBQVMsU0FBQzs7Z0JBRVYsUUFBUSxFQUFFLGFBQWE7Z0JBQ3ZCLFFBQVEsRUFBRSwrQ0FBK0M7YUFDekQ7Ozs7MEJBRUMsU0FBUyxTQUFDLFdBQVc7K0JBQ3JCLEtBQUs7dUJBQ0wsS0FBSztvQ0FDTCxLQUFLOzRCQUNMLEtBQUs7dUJBQ0wsTUFBTTt5QkFPTixLQUFLOzs7Ozs7O0FDekJQOzs7WUFJQyxRQUFRLFNBQUM7Z0JBQ1IsT0FBTyxFQUFFO29CQUNQLFlBQVk7aUJBQ2I7Z0JBQ0QsWUFBWSxFQUFFLENBQUMsbUJBQW1CLENBQUM7Z0JBQ25DLE9BQU8sRUFBRTtvQkFDUCxtQkFBbUI7aUJBQ3BCO2FBQ0Y7Ozs7Ozs7Ozs7Ozs7OzsifQ==