ngx-super-croppie
Version:
NgxSuperCroppie is a simple angular8+ wrapper for croppie
130 lines • 12.9 kB
JavaScript
/**
* wrapper for croppie
* @packageDocumentation
*/
import { Component, EventEmitter, Input, Output, ViewChild, } from '@angular/core';
import Croppie from 'croppie';
import * as i0 from "@angular/core";
export class NgxSuperCroppieComponent {
constructor() {
/**
* Array of points that translate into [topLeftX, topLeftY, bottomRightX, bottomRightY]
*/
this.points = null;
/**
* Custom orientation, applied after exif orientation (if enabled).
* Only works with enableOrientation option enabled (see 'Options').
*
* Valid options are:
* 1 unchanged
* 2 flipped horizontally
* 3 rotated 180 degrees
* 4 flipped vertically
* 5 flipped horizontally, then rotated left by 90 degrees
* 6 rotated clockwise by 90 degrees
* 7 flipped horizontally, then rotated right by 90 degrees
* 8 rotated counter-clockwise by 90 degrees
*/
this.orientation = null;
/**
* Apply zoom after image has been bound
*/
this.zoom = 0;
/**
* event emitted to parent
*/
this.result = new EventEmitter();
}
get url() {
return this._url;
}
set url(url) {
if (this._url === url) {
return;
}
this._url = url;
if (this._croppie) {
this.bind();
}
}
/**
* init cropper
*/
ngOnInit() {
this._croppie = new Croppie(this.croppie.nativeElement, this.croppieOptions);
this.bind();
}
/**
* get crop data
* @returns crop points, and the zoom of the image.
*/
get() {
return this._croppie.get();
}
/**
* Bind an image to the croppie.
* Returns a promise to be resolved when the image has been loaded
* and the croppie has been initialized.
*/
async bind() {
await this._croppie.bind({
url: this.url,
points: this.points,
orientation: this.orientation,
zoom: this.zoom,
});
}
/**
* Destroy a croppie instance and remove it from the DOM
*/
destroy() {
this._croppie.destroy();
}
/**
* emits croppie result to parent
*/
async croppieResult() {
const result = await this._croppie.result(this.resultOptions);
this.result.emit(result);
}
/**
* Rotate the image by a specified degree amount.
* Only works with enableOrientation option enabled (see 'Options')
* @param degrees degrees of rotation
*/
rotate(degrees) {
this._croppie.rotate(degrees);
}
/**
* Set the zoom of a Croppie instance. The value passed in is
* still restricted to the min/max set by Croppie.
* @param zoom zoom value
*/
setZoom(zoom) {
this._croppie.setZoom(zoom);
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: NgxSuperCroppieComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.9", type: NgxSuperCroppieComponent, selector: "ngx-super-croppie", inputs: { croppieOptions: "croppieOptions", url: "url", points: "points", orientation: "orientation", zoom: "zoom", resultOptions: "resultOptions" }, outputs: { result: "result" }, viewQueries: [{ propertyName: "croppie", first: true, predicate: ["croppie"], descendants: true, static: true }], ngImport: i0, template: "<div #croppie (update)=\"croppieResult()\"></div>\r\n", styles: [""] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: NgxSuperCroppieComponent, decorators: [{
type: Component,
args: [{ selector: 'ngx-super-croppie', template: "<div #croppie (update)=\"croppieResult()\"></div>\r\n" }]
}], propDecorators: { croppie: [{
type: ViewChild,
args: ['croppie', { static: true }]
}], croppieOptions: [{
type: Input
}], url: [{
type: Input
}], points: [{
type: Input
}], orientation: [{
type: Input
}], zoom: [{
type: Input
}], resultOptions: [{
type: Input
}], result: [{
type: Output
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibmd4LXN1cGVyLWNyb3BwaWUuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vcHJvamVjdHMvbmd4LXN1cGVyLWNyb3BwaWUvc3JjL2xpYi9uZ3gtc3VwZXItY3JvcHBpZS5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi9wcm9qZWN0cy9uZ3gtc3VwZXItY3JvcHBpZS9zcmMvbGliL25neC1zdXBlci1jcm9wcGllLmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBOzs7R0FHRztBQUVILE9BQU8sRUFDTCxTQUFTLEVBRVQsWUFBWSxFQUNaLEtBQUssRUFFTCxNQUFNLEVBQ04sU0FBUyxHQUNWLE1BQU0sZUFBZSxDQUFDO0FBRXZCLE9BQU8sT0FBb0QsTUFBTSxTQUFTLENBQUM7O0FBTzNFLE1BQU0sT0FBTyx3QkFBd0I7SUFMckM7UUFxQ0U7O1dBRUc7UUFDTSxXQUFNLEdBQWEsSUFBSSxDQUFDO1FBRWpDOzs7Ozs7Ozs7Ozs7O1dBYUc7UUFDTSxnQkFBVyxHQUFXLElBQUksQ0FBQztRQUVwQzs7V0FFRztRQUNNLFNBQUksR0FBRyxDQUFDLENBQUM7UUFRbEI7O1dBRUc7UUFDTyxXQUFNLEdBRVosSUFBSSxZQUFZLEVBQW1ELENBQUM7S0F5RXpFO0lBOUhDLElBQUksR0FBRztRQUNMLE9BQU8sSUFBSSxDQUFDLElBQUksQ0FBQztJQUNuQixDQUFDO0lBRUQsSUFBYSxHQUFHLENBQUMsR0FBVztRQUMxQixJQUFJLElBQUksQ0FBQyxJQUFJLEtBQUssR0FBRyxFQUFFLENBQUM7WUFDdEIsT0FBTztRQUNULENBQUM7UUFFRCxJQUFJLENBQUMsSUFBSSxHQUFHLEdBQUcsQ0FBQztRQUVoQixJQUFJLElBQUksQ0FBQyxRQUFRLEVBQUUsQ0FBQztZQUNsQixJQUFJLENBQUMsSUFBSSxFQUFFLENBQUM7UUFDZCxDQUFDO0lBQ0gsQ0FBQztJQThDRDs7T0FFRztJQUNILFFBQVE7UUFDTixJQUFJLENBQUMsUUFBUSxHQUFHLElBQUksT0FBTyxDQUN6QixJQUFJLENBQUMsT0FBTyxDQUFDLGFBQWEsRUFDMUIsSUFBSSxDQUFDLGNBQWMsQ0FDcEIsQ0FBQztRQUVGLElBQUksQ0FBQyxJQUFJLEVBQUUsQ0FBQztJQUNkLENBQUM7SUFFRDs7O09BR0c7SUFDSSxHQUFHO1FBQ1IsT0FBTyxJQUFJLENBQUMsUUFBUSxDQUFDLEdBQUcsRUFBRSxDQUFDO0lBQzdCLENBQUM7SUFFRDs7OztPQUlHO0lBQ0ssS0FBSyxDQUFDLElBQUk7UUFDaEIsTUFBTSxJQUFJLENBQUMsUUFBUSxDQUFDLElBQUksQ0FBQztZQUN2QixHQUFHLEVBQUUsSUFBSSxDQUFDLEdBQUc7WUFDYixNQUFNLEVBQUUsSUFBSSxDQUFDLE1BQU07WUFDbkIsV0FBVyxFQUFFLElBQUksQ0FBQyxXQUFXO1lBQzdCLElBQUksRUFBRSxJQUFJLENBQUMsSUFBSTtTQUNoQixDQUFDLENBQUM7SUFDTCxDQUFDO0lBRUQ7O09BRUc7SUFDSSxPQUFPO1FBQ1osSUFBSSxDQUFDLFFBQVEsQ0FBQyxPQUFPLEVBQUUsQ0FBQztJQUMxQixDQUFDO0lBRUQ7O09BRUc7SUFDSSxLQUFLLENBQUMsYUFBYTtRQUN4QixNQUFNLE1BQU0sR0FBRyxNQUFNLElBQUksQ0FBQyxRQUFRLENBQUMsTUFBTSxDQUFDLElBQUksQ0FBQyxhQUFhLENBQUMsQ0FBQztRQUM5RCxJQUFJLENBQUMsTUFBTSxDQUFDLElBQUksQ0FBQyxNQUFNLENBQUMsQ0FBQztJQUMzQixDQUFDO0lBRUQ7Ozs7T0FJRztJQUNJLE1BQU0sQ0FBQyxPQUEyQztRQUN2RCxJQUFJLENBQUMsUUFBUSxDQUFDLE1BQU0sQ0FBQyxPQUFPLENBQUMsQ0FBQztJQUNoQyxDQUFDO0lBRUQ7Ozs7T0FJRztJQUNJLE9BQU8sQ0FBQyxJQUFZO1FBQ3pCLElBQUksQ0FBQyxRQUFRLENBQUMsT0FBTyxDQUFDLElBQUksQ0FBQyxDQUFDO0lBQzlCLENBQUM7OEdBN0lVLHdCQUF3QjtrR0FBeEIsd0JBQXdCLGdXQ3RCckMsdURBQ0E7OzJGRHFCYSx3QkFBd0I7a0JBTHBDLFNBQVM7K0JBQ0UsbUJBQW1COzhCQVFXLE9BQU87c0JBQTlDLFNBQVM7dUJBQUMsU0FBUyxFQUFFLEVBQUUsTUFBTSxFQUFFLElBQUksRUFBRTtnQkFNN0IsY0FBYztzQkFBdEIsS0FBSztnQkFVTyxHQUFHO3NCQUFmLEtBQUs7Z0JBZUcsTUFBTTtzQkFBZCxLQUFLO2dCQWdCRyxXQUFXO3NCQUFuQixLQUFLO2dCQUtHLElBQUk7c0JBQVosS0FBSztnQkFNRyxhQUFhO3NCQUFyQixLQUFLO2dCQUtJLE1BQU07c0JBQWYsTUFBTSIsInNvdXJjZXNDb250ZW50IjpbIi8qKlxyXG4gKiB3cmFwcGVyIGZvciBjcm9wcGllXHJcbiAqIEBwYWNrYWdlRG9jdW1lbnRhdGlvblxyXG4gKi9cclxuXHJcbmltcG9ydCB7XHJcbiAgQ29tcG9uZW50LFxyXG4gIEVsZW1lbnRSZWYsXHJcbiAgRXZlbnRFbWl0dGVyLFxyXG4gIElucHV0LFxyXG4gIE9uSW5pdCxcclxuICBPdXRwdXQsXHJcbiAgVmlld0NoaWxkLFxyXG59IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xyXG5cclxuaW1wb3J0IENyb3BwaWUsIHsgQ3JvcHBpZU9wdGlvbnMsIFJlc3VsdE9wdGlvbnMsIENyb3BEYXRhIH0gZnJvbSAnY3JvcHBpZSc7XHJcblxyXG5AQ29tcG9uZW50KHtcclxuICBzZWxlY3RvcjogJ25neC1zdXBlci1jcm9wcGllJyxcclxuICB0ZW1wbGF0ZVVybDogJy4vbmd4LXN1cGVyLWNyb3BwaWUuY29tcG9uZW50Lmh0bWwnLFxyXG4gIHN0eWxlVXJsczogWycuL25neC1zdXBlci1jcm9wcGllLmNvbXBvbmVudC5jc3MnXSxcclxufSlcclxuZXhwb3J0IGNsYXNzIE5neFN1cGVyQ3JvcHBpZUNvbXBvbmVudCBpbXBsZW1lbnRzIE9uSW5pdCB7XHJcbiAgLyoqXHJcbiAgICogcmVmZXJlbmNlIHRvIGNyb3BwaWUgZGl2XHJcbiAgICovXHJcbiAgQFZpZXdDaGlsZCgnY3JvcHBpZScsIHsgc3RhdGljOiB0cnVlIH0pIGNyb3BwaWU6IEVsZW1lbnRSZWY7XHJcblxyXG4gIC8qKlxyXG4gICAqIGNyb3BwaWUgb3B0aW9ucy4gU2VlOlxyXG4gICAqIGh0dHBzOi8vZm9saW90ZWsuZ2l0aHViLmlvL0Nyb3BwaWUvXHJcbiAgICovXHJcbiAgQElucHV0KCkgY3JvcHBpZU9wdGlvbnM6IENyb3BwaWVPcHRpb25zO1xyXG5cclxuICAvKipcclxuICAgKiBVUkwgdG8gaW1hZ2VcclxuICAgKi9cclxuICBwcml2YXRlIF91cmw6IHN0cmluZztcclxuICBnZXQgdXJsKCk6IHN0cmluZyB7XHJcbiAgICByZXR1cm4gdGhpcy5fdXJsO1xyXG4gIH1cclxuXHJcbiAgQElucHV0KCkgc2V0IHVybCh1cmw6IHN0cmluZykge1xyXG4gICAgaWYgKHRoaXMuX3VybCA9PT0gdXJsKSB7XHJcbiAgICAgIHJldHVybjtcclxuICAgIH1cclxuXHJcbiAgICB0aGlzLl91cmwgPSB1cmw7XHJcblxyXG4gICAgaWYgKHRoaXMuX2Nyb3BwaWUpIHtcclxuICAgICAgdGhpcy5iaW5kKCk7XHJcbiAgICB9XHJcbiAgfVxyXG5cclxuICAvKipcclxuICAgKiBBcnJheSBvZiBwb2ludHMgdGhhdCB0cmFuc2xhdGUgaW50byBbdG9wTGVmdFgsIHRvcExlZnRZLCBib3R0b21SaWdodFgsIGJvdHRvbVJpZ2h0WV1cclxuICAgKi9cclxuICBASW5wdXQoKSBwb2ludHM6IG51bWJlcltdID0gbnVsbDtcclxuXHJcbiAgLyoqXHJcbiAgICogQ3VzdG9tIG9yaWVudGF0aW9uLCBhcHBsaWVkIGFmdGVyIGV4aWYgb3JpZW50YXRpb24gKGlmIGVuYWJsZWQpLlxyXG4gICAqIE9ubHkgd29ya3Mgd2l0aCBlbmFibGVPcmllbnRhdGlvbiBvcHRpb24gZW5hYmxlZCAoc2VlICdPcHRpb25zJykuXHJcbiAgICpcclxuICAgKiBWYWxpZCBvcHRpb25zIGFyZTpcclxuICAgKiAxIHVuY2hhbmdlZFxyXG4gICAqIDIgZmxpcHBlZCBob3Jpem9udGFsbHlcclxuICAgKiAzIHJvdGF0ZWQgMTgwIGRlZ3JlZXNcclxuICAgKiA0IGZsaXBwZWQgdmVydGljYWxseVxyXG4gICAqIDUgZmxpcHBlZCBob3Jpem9udGFsbHksIHRoZW4gcm90YXRlZCBsZWZ0IGJ5IDkwIGRlZ3JlZXNcclxuICAgKiA2IHJvdGF0ZWQgY2xvY2t3aXNlIGJ5IDkwIGRlZ3JlZXNcclxuICAgKiA3IGZsaXBwZWQgaG9yaXpvbnRhbGx5LCB0aGVuIHJvdGF0ZWQgcmlnaHQgYnkgOTAgZGVncmVlc1xyXG4gICAqIDggcm90YXRlZCBjb3VudGVyLWNsb2Nrd2lzZSBieSA5MCBkZWdyZWVzXHJcbiAgICovXHJcbiAgQElucHV0KCkgb3JpZW50YXRpb246IG51bWJlciA9IG51bGw7XHJcblxyXG4gIC8qKlxyXG4gICAqIEFwcGx5IHpvb20gYWZ0ZXIgaW1hZ2UgaGFzIGJlZW4gYm91bmRcclxuICAgKi9cclxuICBASW5wdXQoKSB6b29tID0gMDtcclxuXHJcbiAgLyoqXHJcbiAgICogT3B0aW9ucyBmb3IgcmVzdWx0LiBTZWU6XHJcbiAgICogaHR0cHM6Ly9mb2xpb3Rlay5naXRodWIuaW8vQ3JvcHBpZS9cclxuICAgKi9cclxuICBASW5wdXQoKSByZXN1bHRPcHRpb25zOiBSZXN1bHRPcHRpb25zO1xyXG5cclxuICAvKipcclxuICAgKiBldmVudCBlbWl0dGVkIHRvIHBhcmVudFxyXG4gICAqL1xyXG4gIEBPdXRwdXQoKSByZXN1bHQ6IEV2ZW50RW1pdHRlcjxcclxuICAgIHN0cmluZyB8IEhUTUxFbGVtZW50IHwgQmxvYiB8IEhUTUxDYW52YXNFbGVtZW50XHJcbiAgPiA9IG5ldyBFdmVudEVtaXR0ZXI8c3RyaW5nIHwgSFRNTEVsZW1lbnQgfCBCbG9iIHwgSFRNTENhbnZhc0VsZW1lbnQ+KCk7XHJcblxyXG4gIC8qKlxyXG4gICAqIGNyb3BwaWUgb2JqZWN0XHJcbiAgICovXHJcbiAgX2Nyb3BwaWU6IENyb3BwaWU7XHJcblxyXG4gIC8qKlxyXG4gICAqIGluaXQgY3JvcHBlclxyXG4gICAqL1xyXG4gIG5nT25Jbml0KCk6IHZvaWQge1xyXG4gICAgdGhpcy5fY3JvcHBpZSA9IG5ldyBDcm9wcGllKFxyXG4gICAgICB0aGlzLmNyb3BwaWUubmF0aXZlRWxlbWVudCxcclxuICAgICAgdGhpcy5jcm9wcGllT3B0aW9ucyxcclxuICAgICk7XHJcblxyXG4gICAgdGhpcy5iaW5kKCk7XHJcbiAgfVxyXG5cclxuICAvKipcclxuICAgKiBnZXQgY3JvcCBkYXRhXHJcbiAgICogQHJldHVybnMgY3JvcCBwb2ludHMsIGFuZCB0aGUgem9vbSBvZiB0aGUgaW1hZ2UuXHJcbiAgICovXHJcbiAgcHVibGljIGdldCgpOiBDcm9wRGF0YSB7XHJcbiAgICByZXR1cm4gdGhpcy5fY3JvcHBpZS5nZXQoKTtcclxuICB9XHJcblxyXG4gIC8qKlxyXG4gICAqIEJpbmQgYW4gaW1hZ2UgdG8gdGhlIGNyb3BwaWUuXHJcbiAgICogUmV0dXJucyBhIHByb21pc2UgdG8gYmUgcmVzb2x2ZWQgd2hlbiB0aGUgaW1hZ2UgaGFzIGJlZW4gbG9hZGVkXHJcbiAgICogYW5kIHRoZSBjcm9wcGllIGhhcyBiZWVuIGluaXRpYWxpemVkLlxyXG4gICAqL1xyXG4gIHByaXZhdGUgYXN5bmMgYmluZCgpOiBQcm9taXNlPHZvaWQ+IHtcclxuICAgIGF3YWl0IHRoaXMuX2Nyb3BwaWUuYmluZCh7XHJcbiAgICAgIHVybDogdGhpcy51cmwsXHJcbiAgICAgIHBvaW50czogdGhpcy5wb2ludHMsXHJcbiAgICAgIG9yaWVudGF0aW9uOiB0aGlzLm9yaWVudGF0aW9uLFxyXG4gICAgICB6b29tOiB0aGlzLnpvb20sXHJcbiAgICB9KTtcclxuICB9XHJcblxyXG4gIC8qKlxyXG4gICAqIERlc3Ryb3kgYSBjcm9wcGllIGluc3RhbmNlIGFuZCByZW1vdmUgaXQgZnJvbSB0aGUgRE9NXHJcbiAgICovXHJcbiAgcHVibGljIGRlc3Ryb3koKTogdm9pZCB7XHJcbiAgICB0aGlzLl9jcm9wcGllLmRlc3Ryb3koKTtcclxuICB9XHJcblxyXG4gIC8qKlxyXG4gICAqIGVtaXRzIGNyb3BwaWUgcmVzdWx0IHRvIHBhcmVudFxyXG4gICAqL1xyXG4gIHB1YmxpYyBhc3luYyBjcm9wcGllUmVzdWx0KCk6IFByb21pc2U8dm9pZD4ge1xyXG4gICAgY29uc3QgcmVzdWx0ID0gYXdhaXQgdGhpcy5fY3JvcHBpZS5yZXN1bHQodGhpcy5yZXN1bHRPcHRpb25zKTtcclxuICAgIHRoaXMucmVzdWx0LmVtaXQocmVzdWx0KTtcclxuICB9XHJcblxyXG4gIC8qKlxyXG4gICAqIFJvdGF0ZSB0aGUgaW1hZ2UgYnkgYSBzcGVjaWZpZWQgZGVncmVlIGFtb3VudC5cclxuICAgKiBPbmx5IHdvcmtzIHdpdGggZW5hYmxlT3JpZW50YXRpb24gb3B0aW9uIGVuYWJsZWQgKHNlZSAnT3B0aW9ucycpXHJcbiAgICogQHBhcmFtIGRlZ3JlZXMgZGVncmVlcyBvZiByb3RhdGlvblxyXG4gICAqL1xyXG4gIHB1YmxpYyByb3RhdGUoZGVncmVlczogOTAgfCAxODAgfCAyNzAgfCAtOTAgfCAtMTgwIHwgLTI3MCk6IHZvaWQge1xyXG4gICAgdGhpcy5fY3JvcHBpZS5yb3RhdGUoZGVncmVlcyk7XHJcbiAgfVxyXG5cclxuICAvKipcclxuICAgKiBTZXQgdGhlIHpvb20gb2YgYSBDcm9wcGllIGluc3RhbmNlLiBUaGUgdmFsdWUgcGFzc2VkIGluIGlzXHJcbiAgICogc3RpbGwgcmVzdHJpY3RlZCB0byB0aGUgbWluL21heCBzZXQgYnkgQ3JvcHBpZS5cclxuICAgKiBAcGFyYW0gem9vbSB6b29tIHZhbHVlXHJcbiAgICovXHJcbiAgcHVibGljIHNldFpvb20oem9vbTogbnVtYmVyKTogdm9pZCB7XHJcbiAgICB0aGlzLl9jcm9wcGllLnNldFpvb20oem9vbSk7XHJcbiAgfVxyXG59XHJcbiIsIjxkaXYgI2Nyb3BwaWUgKHVwZGF0ZSk9XCJjcm9wcGllUmVzdWx0KClcIj48L2Rpdj5cclxuIl19