ngx-image-cropper 6.0.3 → 6.2.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +49 -45
- package/esm2020/index.mjs +7 -0
- package/esm2020/lib/component/image-cropper.component.mjs +33 -6
- package/esm2020/lib/image-cropper.module.mjs +2 -2
- package/esm2020/lib/interfaces/image-transform.interface.mjs +1 -1
- package/esm2020/lib/interfaces/move-start.interface.mjs +2 -1
- package/esm2020/lib/services/crop.service.mjs +24 -4
- package/esm2020/lib/utils/percentage.utils.mjs +4 -0
- package/esm2020/public-api.mjs +2 -6
- package/fesm2015/ngx-image-cropper.mjs +60 -11
- package/fesm2015/ngx-image-cropper.mjs.map +1 -1
- package/fesm2020/ngx-image-cropper.mjs +61 -10
- package/fesm2020/ngx-image-cropper.mjs.map +1 -1
- package/index.d.ts +6 -0
- package/lib/component/image-cropper.component.d.ts +3 -1
- package/lib/interfaces/image-transform.interface.d.ts +3 -0
- package/lib/interfaces/move-start.interface.d.ts +3 -0
- package/lib/services/crop.service.d.ts +2 -0
- package/lib/utils/percentage.utils.d.ts +1 -0
- package/package.json +2 -4
- package/public-api.d.ts +1 -5
|
@@ -57,6 +57,7 @@ class CropperSettings {
|
|
|
57
57
|
|
|
58
58
|
var MoveTypes;
|
|
59
59
|
(function (MoveTypes) {
|
|
60
|
+
MoveTypes["Drag"] = "drag";
|
|
60
61
|
MoveTypes["Move"] = "move";
|
|
61
62
|
MoveTypes["Resize"] = "resize";
|
|
62
63
|
MoveTypes["Pinch"] = "pinch";
|
|
@@ -177,6 +178,10 @@ function resizeCanvas(canvas, width, height) {
|
|
|
177
178
|
}
|
|
178
179
|
}
|
|
179
180
|
|
|
181
|
+
function percentage(percent, totalValue) {
|
|
182
|
+
return (percent / 100) * totalValue;
|
|
183
|
+
}
|
|
184
|
+
|
|
180
185
|
class CropService {
|
|
181
186
|
crop(sourceImage, loadedImage, cropper, settings) {
|
|
182
187
|
const imagePosition = this.getImagePosition(sourceImage, loadedImage, cropper, settings);
|
|
@@ -199,7 +204,8 @@ class CropService {
|
|
|
199
204
|
ctx.setTransform(scaleX, 0, 0, scaleY, transformedImage.size.width / 2, transformedImage.size.height / 2);
|
|
200
205
|
ctx.translate(-imagePosition.x1 / scaleX, -imagePosition.y1 / scaleY);
|
|
201
206
|
ctx.rotate((settings.transform.rotate || 0) * Math.PI / 180);
|
|
202
|
-
|
|
207
|
+
const { translateH, translateV } = this.getCanvasTranslate(sourceImage, loadedImage, settings);
|
|
208
|
+
ctx.drawImage(transformedImage.image, translateH - transformedImage.size.width / 2, translateV - transformedImage.size.height / 2);
|
|
203
209
|
const output = {
|
|
204
210
|
width, height,
|
|
205
211
|
imagePosition,
|
|
@@ -219,9 +225,27 @@ class CropService {
|
|
|
219
225
|
output.base64 = cropCanvas.toDataURL('image/' + settings.format, this.getQuality(settings));
|
|
220
226
|
return output;
|
|
221
227
|
}
|
|
222
|
-
|
|
228
|
+
getCanvasTranslate(sourceImage, loadedImage, settings) {
|
|
229
|
+
if (settings.transform.translateUnit === 'px') {
|
|
230
|
+
const ratio = this.getRatio(sourceImage, loadedImage);
|
|
231
|
+
return {
|
|
232
|
+
translateH: (settings.transform.translateH || 0) * ratio,
|
|
233
|
+
translateV: (settings.transform.translateV || 0) * ratio
|
|
234
|
+
};
|
|
235
|
+
}
|
|
236
|
+
else {
|
|
237
|
+
return {
|
|
238
|
+
translateH: settings.transform.translateH ? percentage(settings.transform.translateH, loadedImage.transformed.size.width) : 0,
|
|
239
|
+
translateV: settings.transform.translateV ? percentage(settings.transform.translateV, loadedImage.transformed.size.height) : 0
|
|
240
|
+
};
|
|
241
|
+
}
|
|
242
|
+
}
|
|
243
|
+
getRatio(sourceImage, loadedImage) {
|
|
223
244
|
const sourceImageElement = sourceImage.nativeElement;
|
|
224
|
-
|
|
245
|
+
return loadedImage.transformed.size.width / sourceImageElement.offsetWidth;
|
|
246
|
+
}
|
|
247
|
+
getImagePosition(sourceImage, loadedImage, cropper, settings) {
|
|
248
|
+
const ratio = this.getRatio(sourceImage, loadedImage);
|
|
225
249
|
const out = {
|
|
226
250
|
x1: Math.round(cropper.x1 * ratio),
|
|
227
251
|
y1: Math.round(cropper.y1 * ratio),
|
|
@@ -782,6 +806,7 @@ class ImageCropperComponent {
|
|
|
782
806
|
this.backgroundColor = this.settings.backgroundColor;
|
|
783
807
|
this.containWithinAspectRatio = this.settings.containWithinAspectRatio;
|
|
784
808
|
this.hideResizeSquares = this.settings.hideResizeSquares;
|
|
809
|
+
this.allowMoveImage = false;
|
|
785
810
|
this.cropper = {
|
|
786
811
|
x1: -100,
|
|
787
812
|
y1: -100,
|
|
@@ -795,6 +820,7 @@ class ImageCropperComponent {
|
|
|
795
820
|
this.imageLoaded = new EventEmitter();
|
|
796
821
|
this.cropperReady = new EventEmitter();
|
|
797
822
|
this.loadImageFailed = new EventEmitter();
|
|
823
|
+
this.transformChange = new EventEmitter();
|
|
798
824
|
this.reset();
|
|
799
825
|
}
|
|
800
826
|
ngOnChanges(changes) {
|
|
@@ -823,6 +849,7 @@ class ImageCropperComponent {
|
|
|
823
849
|
this.transform = this.transform || {};
|
|
824
850
|
this.setCssTransform();
|
|
825
851
|
this.doAutoCrop();
|
|
852
|
+
this.cd.markForCheck();
|
|
826
853
|
}
|
|
827
854
|
}
|
|
828
855
|
onChangesUpdateSettings(changes) {
|
|
@@ -859,9 +886,11 @@ class ImageCropperComponent {
|
|
|
859
886
|
return this.imageChangedEvent?.target?.files?.length > 0;
|
|
860
887
|
}
|
|
861
888
|
setCssTransform() {
|
|
889
|
+
const translateUnit = this.transform?.translateUnit || '%';
|
|
862
890
|
this.safeTransformStyle = this.sanitizer.bypassSecurityTrustStyle('scaleX(' + (this.transform.scale || 1) * (this.transform.flipH ? -1 : 1) + ')' +
|
|
863
891
|
'scaleY(' + (this.transform.scale || 1) * (this.transform.flipV ? -1 : 1) + ')' +
|
|
864
|
-
'rotate(' + (this.transform.rotate || 0) + 'deg)'
|
|
892
|
+
'rotate(' + (this.transform.rotate || 0) + 'deg)' +
|
|
893
|
+
`translate(${this.transform.translateH || 0}${translateUnit}, ${this.transform.translateV || 0}${translateUnit})`);
|
|
865
894
|
}
|
|
866
895
|
ngOnInit() {
|
|
867
896
|
this.settings.stepSize = this.initialStepSize;
|
|
@@ -1007,7 +1036,9 @@ class ImageCropperComponent {
|
|
|
1007
1036
|
this.moveStop();
|
|
1008
1037
|
}
|
|
1009
1038
|
startMove(event, moveType, position = null) {
|
|
1010
|
-
if (this.
|
|
1039
|
+
if (this.disabled
|
|
1040
|
+
|| this.moveStart?.active && this.moveStart?.type === MoveTypes.Pinch
|
|
1041
|
+
|| moveType === MoveTypes.Drag && !this.allowMoveImage) {
|
|
1011
1042
|
return;
|
|
1012
1043
|
}
|
|
1013
1044
|
if (event.preventDefault) {
|
|
@@ -1017,6 +1048,7 @@ class ImageCropperComponent {
|
|
|
1017
1048
|
active: true,
|
|
1018
1049
|
type: moveType,
|
|
1019
1050
|
position,
|
|
1051
|
+
transform: { ...this.transform },
|
|
1020
1052
|
clientX: this.cropperPositionService.getClientX(event),
|
|
1021
1053
|
clientY: this.cropperPositionService.getClientY(event),
|
|
1022
1054
|
...this.cropper
|
|
@@ -1056,6 +1088,16 @@ class ImageCropperComponent {
|
|
|
1056
1088
|
}
|
|
1057
1089
|
this.checkCropperPosition(false);
|
|
1058
1090
|
}
|
|
1091
|
+
else if (this.moveStart.type === MoveTypes.Drag) {
|
|
1092
|
+
const diffX = this.cropperPositionService.getClientX(event) - this.moveStart.clientX;
|
|
1093
|
+
const diffY = this.cropperPositionService.getClientY(event) - this.moveStart.clientY;
|
|
1094
|
+
this.transform = {
|
|
1095
|
+
...this.transform,
|
|
1096
|
+
translateH: (this.moveStart.transform?.translateH || 0) + diffX,
|
|
1097
|
+
translateV: (this.moveStart.transform?.translateV || 0) + diffY
|
|
1098
|
+
};
|
|
1099
|
+
this.setCssTransform();
|
|
1100
|
+
}
|
|
1059
1101
|
this.cd.detectChanges();
|
|
1060
1102
|
}
|
|
1061
1103
|
}
|
|
@@ -1148,7 +1190,12 @@ class ImageCropperComponent {
|
|
|
1148
1190
|
moveStop() {
|
|
1149
1191
|
if (this.moveStart.active) {
|
|
1150
1192
|
this.moveStart.active = false;
|
|
1151
|
-
this.
|
|
1193
|
+
if (this.moveStart?.type === MoveTypes.Drag) {
|
|
1194
|
+
this.transformChange.emit(this.transform);
|
|
1195
|
+
}
|
|
1196
|
+
else {
|
|
1197
|
+
this.doAutoCrop();
|
|
1198
|
+
}
|
|
1152
1199
|
}
|
|
1153
1200
|
}
|
|
1154
1201
|
pinchStop() {
|
|
@@ -1175,10 +1222,10 @@ class ImageCropperComponent {
|
|
|
1175
1222
|
}
|
|
1176
1223
|
}
|
|
1177
1224
|
ImageCropperComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: ImageCropperComponent, deps: [{ token: CropService }, { token: CropperPositionService }, { token: LoadImageService }, { token: i4.DomSanitizer }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
1178
|
-
ImageCropperComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.1", type: ImageCropperComponent, selector: "image-cropper", inputs: { imageChangedEvent: "imageChangedEvent", imageURL: "imageURL", imageBase64: "imageBase64", imageFile: "imageFile", format: "format", transform: "transform", maintainAspectRatio: "maintainAspectRatio", aspectRatio: "aspectRatio", resizeToWidth: "resizeToWidth", resizeToHeight: "resizeToHeight", cropperMinWidth: "cropperMinWidth", cropperMinHeight: "cropperMinHeight", cropperMaxHeight: "cropperMaxHeight", cropperMaxWidth: "cropperMaxWidth", cropperStaticWidth: "cropperStaticWidth", cropperStaticHeight: "cropperStaticHeight", canvasRotation: "canvasRotation", initialStepSize: "initialStepSize", roundCropper: "roundCropper", onlyScaleDown: "onlyScaleDown", imageQuality: "imageQuality", autoCrop: "autoCrop", backgroundColor: "backgroundColor", containWithinAspectRatio: "containWithinAspectRatio", hideResizeSquares: "hideResizeSquares", cropper: "cropper", alignImage: "alignImage", disabled: "disabled" }, outputs: { imageCropped: "imageCropped", startCropImage: "startCropImage", imageLoaded: "imageLoaded", cropperReady: "cropperReady", loadImageFailed: "loadImageFailed" }, host: { listeners: { "window:resize": "onResize()", "document:mousemove": "moveImg($event)", "document:touchmove": "moveImg($event)", "document:mouseup": "moveStop()", "document:touchend": "moveStop()" }, properties: { "style.text-align": "this.alignImage", "class.disabled": "this.disabled" } }, viewQueries: [{ propertyName: "wrapper", first: true, predicate: ["wrapper"], descendants: true, static: true }, { propertyName: "sourceImage", first: true, predicate: ["sourceImage"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div
|
|
1225
|
+
ImageCropperComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.1", type: ImageCropperComponent, selector: "image-cropper", inputs: { imageChangedEvent: "imageChangedEvent", imageURL: "imageURL", imageBase64: "imageBase64", imageFile: "imageFile", format: "format", transform: "transform", maintainAspectRatio: "maintainAspectRatio", aspectRatio: "aspectRatio", resizeToWidth: "resizeToWidth", resizeToHeight: "resizeToHeight", cropperMinWidth: "cropperMinWidth", cropperMinHeight: "cropperMinHeight", cropperMaxHeight: "cropperMaxHeight", cropperMaxWidth: "cropperMaxWidth", cropperStaticWidth: "cropperStaticWidth", cropperStaticHeight: "cropperStaticHeight", canvasRotation: "canvasRotation", initialStepSize: "initialStepSize", roundCropper: "roundCropper", onlyScaleDown: "onlyScaleDown", imageQuality: "imageQuality", autoCrop: "autoCrop", backgroundColor: "backgroundColor", containWithinAspectRatio: "containWithinAspectRatio", hideResizeSquares: "hideResizeSquares", allowMoveImage: "allowMoveImage", cropper: "cropper", alignImage: "alignImage", disabled: "disabled" }, outputs: { imageCropped: "imageCropped", startCropImage: "startCropImage", imageLoaded: "imageLoaded", cropperReady: "cropperReady", loadImageFailed: "loadImageFailed", transformChange: "transformChange" }, host: { listeners: { "window:resize": "onResize()", "document:mousemove": "moveImg($event)", "document:touchmove": "moveImg($event)", "document:mouseup": "moveStop()", "document:touchend": "moveStop()" }, properties: { "style.text-align": "this.alignImage", "class.disabled": "this.disabled" } }, viewQueries: [{ propertyName: "wrapper", first: true, predicate: ["wrapper"], descendants: true, static: true }, { propertyName: "sourceImage", first: true, predicate: ["sourceImage"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div\n [style.background]=\"imageVisible && backgroundColor\"\n #wrapper\n>\n <img\n #sourceImage\n class=\"ngx-ic-source-image\"\n *ngIf=\"safeImgDataUrl\"\n [src]=\"safeImgDataUrl\"\n [style.visibility]=\"imageVisible ? 'visible' : 'hidden'\"\n [style.transform]=\"safeTransformStyle\"\n [class.ngx-ic-draggable]=\"!disabled && allowMoveImage\"\n (load)=\"imageLoadedInView()\"\n (mousedown)=\"startMove($event, moveTypes.Drag)\"\n (touchstart)=\"startMove($event, moveTypes.Drag)\"\n >\n <div\n class=\"ngx-ic-overlay\"\n [style.width.px]=\"maxSize.width\"\n [style.height.px]=\"maxSize.height\"\n [style.margin-left]=\"alignImage === 'center' ? marginLeft : null\"\n ></div>\n <div class=\"ngx-ic-cropper\"\n *ngIf=\"imageVisible\"\n [class.ngx-ic-round]=\"roundCropper\"\n [style.top.px]=\"cropper.y1\"\n [style.left.px]=\"cropper.x1\"\n [style.width.px]=\"cropper.x2 - cropper.x1\"\n [style.height.px]=\"cropper.y2 - cropper.y1\"\n [style.margin-left]=\"alignImage === 'center' ? marginLeft : null\"\n [style.visibility]=\"imageVisible ? 'visible' : 'hidden'\"\n (keydown)=\"keyboardAccess($event)\"\n tabindex=\"0\"\n >\n <div\n (mousedown)=\"startMove($event, moveTypes.Move)\"\n (touchstart)=\"startMove($event, moveTypes.Move)\"\n class=\"ngx-ic-move\">\n </div>\n <ng-container *ngIf=\"!hideResizeSquares\">\n <span class=\"ngx-ic-resize ngx-ic-topleft\"\n (mousedown)=\"startMove($event, moveTypes.Resize, 'topleft')\"\n (touchstart)=\"startMove($event, moveTypes.Resize, 'topleft')\">\n <span class=\"ngx-ic-square\"></span>\n </span>\n <span class=\"ngx-ic-resize ngx-ic-top\">\n <span class=\"ngx-ic-square\"></span>\n </span>\n <span class=\"ngx-ic-resize ngx-ic-topright\"\n (mousedown)=\"startMove($event, moveTypes.Resize, 'topright')\"\n (touchstart)=\"startMove($event, moveTypes.Resize, 'topright')\">\n <span class=\"ngx-ic-square\"></span>\n </span>\n <span class=\"ngx-ic-resize ngx-ic-right\">\n <span class=\"ngx-ic-square\"></span>\n </span>\n <span class=\"ngx-ic-resize ngx-ic-bottomright\"\n (mousedown)=\"startMove($event, moveTypes.Resize, 'bottomright')\"\n (touchstart)=\"startMove($event, moveTypes.Resize, 'bottomright')\">\n <span class=\"ngx-ic-square\"></span>\n </span>\n <span class=\"ngx-ic-resize ngx-ic-bottom\">\n <span class=\"ngx-ic-square\"></span>\n </span>\n <span class=\"ngx-ic-resize ngx-ic-bottomleft\"\n (mousedown)=\"startMove($event, moveTypes.Resize, 'bottomleft')\"\n (touchstart)=\"startMove($event, moveTypes.Resize, 'bottomleft')\">\n <span class=\"ngx-ic-square\"></span>\n </span>\n <span class=\"ngx-ic-resize ngx-ic-left\">\n <span class=\"ngx-ic-square\"></span>\n </span>\n <span class=\"ngx-ic-resize-bar ngx-ic-top\"\n (mousedown)=\"startMove($event, moveTypes.Resize, 'top')\"\n (touchstart)=\"startMove($event, moveTypes.Resize, 'top')\">\n </span>\n <span class=\"ngx-ic-resize-bar ngx-ic-right\"\n (mousedown)=\"startMove($event, moveTypes.Resize, 'right')\"\n (touchstart)=\"startMove($event, moveTypes.Resize, 'right')\">\n </span>\n <span class=\"ngx-ic-resize-bar ngx-ic-bottom\"\n (mousedown)=\"startMove($event, moveTypes.Resize, 'bottom')\"\n (touchstart)=\"startMove($event, moveTypes.Resize, 'bottom')\">\n </span>\n <span class=\"ngx-ic-resize-bar ngx-ic-left\"\n (mousedown)=\"startMove($event, moveTypes.Resize, 'left')\"\n (touchstart)=\"startMove($event, moveTypes.Resize, 'left')\">\n </span>\n </ng-container>\n </div>\n</div>\n", styles: [":host{display:flex;position:relative;width:100%;max-width:100%;max-height:100%;overflow:hidden;padding:5px;text-align:center}:host>div{width:100%;position:relative}:host>div img.ngx-ic-source-image{max-width:100%;max-height:100%;transform-origin:center}:host>div img.ngx-ic-source-image.ngx-ic-draggable{user-drag:none;-webkit-user-drag:none;user-select:none;-moz-user-select:none;-webkit-user-select:none;-ms-user-select:none;cursor:grab}:host .ngx-ic-overlay{position:absolute;pointer-events:none;touch-action:none;outline:var(--cropper-overlay-color, white) solid 100vw;top:0;left:0}:host .ngx-ic-cropper{position:absolute;display:flex;color:#53535c;background:transparent;outline:rgba(255,255,255,.3) solid 100vw;outline:var(--cropper-outline-color, rgba(255, 255, 255, .3)) solid 100vw;touch-action:none}@media (orientation: portrait){:host .ngx-ic-cropper{outline-width:100vh}}:host .ngx-ic-cropper:after{position:absolute;content:\"\";top:0;bottom:0;left:0;right:0;pointer-events:none;border:dashed 1px;opacity:.75;color:inherit;z-index:1}:host .ngx-ic-cropper .ngx-ic-move{width:100%;cursor:move;border:1px solid rgba(255,255,255,.5)}:host .ngx-ic-cropper:focus .ngx-ic-move{border-color:#1e90ff;border-width:2px}:host .ngx-ic-cropper .ngx-ic-resize{position:absolute;display:inline-block;line-height:6px;padding:8px;opacity:.85;z-index:1}:host .ngx-ic-cropper .ngx-ic-resize .ngx-ic-square{display:inline-block;background:#53535C;width:6px;height:6px;border:1px solid rgba(255,255,255,.5);box-sizing:content-box}:host .ngx-ic-cropper .ngx-ic-resize.ngx-ic-topleft{top:-12px;left:-12px;cursor:nwse-resize}:host .ngx-ic-cropper .ngx-ic-resize.ngx-ic-top{top:-12px;left:calc(50% - 12px);cursor:ns-resize}:host .ngx-ic-cropper .ngx-ic-resize.ngx-ic-topright{top:-12px;right:-12px;cursor:nesw-resize}:host .ngx-ic-cropper .ngx-ic-resize.ngx-ic-right{top:calc(50% - 12px);right:-12px;cursor:ew-resize}:host .ngx-ic-cropper .ngx-ic-resize.ngx-ic-bottomright{bottom:-12px;right:-12px;cursor:nwse-resize}:host .ngx-ic-cropper .ngx-ic-resize.ngx-ic-bottom{bottom:-12px;left:calc(50% - 12px);cursor:ns-resize}:host .ngx-ic-cropper .ngx-ic-resize.ngx-ic-bottomleft{bottom:-12px;left:-12px;cursor:nesw-resize}:host .ngx-ic-cropper .ngx-ic-resize.ngx-ic-left{top:calc(50% - 12px);left:-12px;cursor:ew-resize}:host .ngx-ic-cropper .ngx-ic-resize-bar{position:absolute;z-index:1}:host .ngx-ic-cropper .ngx-ic-resize-bar.ngx-ic-top{top:-11px;left:11px;width:calc(100% - 22px);height:22px;cursor:ns-resize}:host .ngx-ic-cropper .ngx-ic-resize-bar.ngx-ic-right{top:11px;right:-11px;height:calc(100% - 22px);width:22px;cursor:ew-resize}:host .ngx-ic-cropper .ngx-ic-resize-bar.ngx-ic-bottom{bottom:-11px;left:11px;width:calc(100% - 22px);height:22px;cursor:ns-resize}:host .ngx-ic-cropper .ngx-ic-resize-bar.ngx-ic-left{top:11px;left:-11px;height:calc(100% - 22px);width:22px;cursor:ew-resize}:host .ngx-ic-cropper.ngx-ic-round{outline-color:transparent}:host .ngx-ic-cropper.ngx-ic-round:after{border-radius:100%;box-shadow:0 0 0 100vw #ffffff4d;box-shadow:0 0 0 100vw var(--cropper-outline-color, rgba(255, 255, 255, .3))}@media (orientation: portrait){:host .ngx-ic-cropper.ngx-ic-round:after{box-shadow:0 0 0 100vh #ffffff4d;box-shadow:0 0 0 100vh var(--cropper-outline-color, rgba(255, 255, 255, .3))}}:host .ngx-ic-cropper.ngx-ic-round .ngx-ic-move{border-radius:100%}:host.disabled .ngx-ic-cropper .ngx-ic-resize,:host.disabled .ngx-ic-cropper .ngx-ic-resize-bar,:host.disabled .ngx-ic-cropper .ngx-ic-move{display:none}\n"], directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1179
1226
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: ImageCropperComponent, decorators: [{
|
|
1180
1227
|
type: Component,
|
|
1181
|
-
args: [{ selector: 'image-cropper', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div
|
|
1228
|
+
args: [{ selector: 'image-cropper', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n [style.background]=\"imageVisible && backgroundColor\"\n #wrapper\n>\n <img\n #sourceImage\n class=\"ngx-ic-source-image\"\n *ngIf=\"safeImgDataUrl\"\n [src]=\"safeImgDataUrl\"\n [style.visibility]=\"imageVisible ? 'visible' : 'hidden'\"\n [style.transform]=\"safeTransformStyle\"\n [class.ngx-ic-draggable]=\"!disabled && allowMoveImage\"\n (load)=\"imageLoadedInView()\"\n (mousedown)=\"startMove($event, moveTypes.Drag)\"\n (touchstart)=\"startMove($event, moveTypes.Drag)\"\n >\n <div\n class=\"ngx-ic-overlay\"\n [style.width.px]=\"maxSize.width\"\n [style.height.px]=\"maxSize.height\"\n [style.margin-left]=\"alignImage === 'center' ? marginLeft : null\"\n ></div>\n <div class=\"ngx-ic-cropper\"\n *ngIf=\"imageVisible\"\n [class.ngx-ic-round]=\"roundCropper\"\n [style.top.px]=\"cropper.y1\"\n [style.left.px]=\"cropper.x1\"\n [style.width.px]=\"cropper.x2 - cropper.x1\"\n [style.height.px]=\"cropper.y2 - cropper.y1\"\n [style.margin-left]=\"alignImage === 'center' ? marginLeft : null\"\n [style.visibility]=\"imageVisible ? 'visible' : 'hidden'\"\n (keydown)=\"keyboardAccess($event)\"\n tabindex=\"0\"\n >\n <div\n (mousedown)=\"startMove($event, moveTypes.Move)\"\n (touchstart)=\"startMove($event, moveTypes.Move)\"\n class=\"ngx-ic-move\">\n </div>\n <ng-container *ngIf=\"!hideResizeSquares\">\n <span class=\"ngx-ic-resize ngx-ic-topleft\"\n (mousedown)=\"startMove($event, moveTypes.Resize, 'topleft')\"\n (touchstart)=\"startMove($event, moveTypes.Resize, 'topleft')\">\n <span class=\"ngx-ic-square\"></span>\n </span>\n <span class=\"ngx-ic-resize ngx-ic-top\">\n <span class=\"ngx-ic-square\"></span>\n </span>\n <span class=\"ngx-ic-resize ngx-ic-topright\"\n (mousedown)=\"startMove($event, moveTypes.Resize, 'topright')\"\n (touchstart)=\"startMove($event, moveTypes.Resize, 'topright')\">\n <span class=\"ngx-ic-square\"></span>\n </span>\n <span class=\"ngx-ic-resize ngx-ic-right\">\n <span class=\"ngx-ic-square\"></span>\n </span>\n <span class=\"ngx-ic-resize ngx-ic-bottomright\"\n (mousedown)=\"startMove($event, moveTypes.Resize, 'bottomright')\"\n (touchstart)=\"startMove($event, moveTypes.Resize, 'bottomright')\">\n <span class=\"ngx-ic-square\"></span>\n </span>\n <span class=\"ngx-ic-resize ngx-ic-bottom\">\n <span class=\"ngx-ic-square\"></span>\n </span>\n <span class=\"ngx-ic-resize ngx-ic-bottomleft\"\n (mousedown)=\"startMove($event, moveTypes.Resize, 'bottomleft')\"\n (touchstart)=\"startMove($event, moveTypes.Resize, 'bottomleft')\">\n <span class=\"ngx-ic-square\"></span>\n </span>\n <span class=\"ngx-ic-resize ngx-ic-left\">\n <span class=\"ngx-ic-square\"></span>\n </span>\n <span class=\"ngx-ic-resize-bar ngx-ic-top\"\n (mousedown)=\"startMove($event, moveTypes.Resize, 'top')\"\n (touchstart)=\"startMove($event, moveTypes.Resize, 'top')\">\n </span>\n <span class=\"ngx-ic-resize-bar ngx-ic-right\"\n (mousedown)=\"startMove($event, moveTypes.Resize, 'right')\"\n (touchstart)=\"startMove($event, moveTypes.Resize, 'right')\">\n </span>\n <span class=\"ngx-ic-resize-bar ngx-ic-bottom\"\n (mousedown)=\"startMove($event, moveTypes.Resize, 'bottom')\"\n (touchstart)=\"startMove($event, moveTypes.Resize, 'bottom')\">\n </span>\n <span class=\"ngx-ic-resize-bar ngx-ic-left\"\n (mousedown)=\"startMove($event, moveTypes.Resize, 'left')\"\n (touchstart)=\"startMove($event, moveTypes.Resize, 'left')\">\n </span>\n </ng-container>\n </div>\n</div>\n", styles: [":host{display:flex;position:relative;width:100%;max-width:100%;max-height:100%;overflow:hidden;padding:5px;text-align:center}:host>div{width:100%;position:relative}:host>div img.ngx-ic-source-image{max-width:100%;max-height:100%;transform-origin:center}:host>div img.ngx-ic-source-image.ngx-ic-draggable{user-drag:none;-webkit-user-drag:none;user-select:none;-moz-user-select:none;-webkit-user-select:none;-ms-user-select:none;cursor:grab}:host .ngx-ic-overlay{position:absolute;pointer-events:none;touch-action:none;outline:var(--cropper-overlay-color, white) solid 100vw;top:0;left:0}:host .ngx-ic-cropper{position:absolute;display:flex;color:#53535c;background:transparent;outline:rgba(255,255,255,.3) solid 100vw;outline:var(--cropper-outline-color, rgba(255, 255, 255, .3)) solid 100vw;touch-action:none}@media (orientation: portrait){:host .ngx-ic-cropper{outline-width:100vh}}:host .ngx-ic-cropper:after{position:absolute;content:\"\";top:0;bottom:0;left:0;right:0;pointer-events:none;border:dashed 1px;opacity:.75;color:inherit;z-index:1}:host .ngx-ic-cropper .ngx-ic-move{width:100%;cursor:move;border:1px solid rgba(255,255,255,.5)}:host .ngx-ic-cropper:focus .ngx-ic-move{border-color:#1e90ff;border-width:2px}:host .ngx-ic-cropper .ngx-ic-resize{position:absolute;display:inline-block;line-height:6px;padding:8px;opacity:.85;z-index:1}:host .ngx-ic-cropper .ngx-ic-resize .ngx-ic-square{display:inline-block;background:#53535C;width:6px;height:6px;border:1px solid rgba(255,255,255,.5);box-sizing:content-box}:host .ngx-ic-cropper .ngx-ic-resize.ngx-ic-topleft{top:-12px;left:-12px;cursor:nwse-resize}:host .ngx-ic-cropper .ngx-ic-resize.ngx-ic-top{top:-12px;left:calc(50% - 12px);cursor:ns-resize}:host .ngx-ic-cropper .ngx-ic-resize.ngx-ic-topright{top:-12px;right:-12px;cursor:nesw-resize}:host .ngx-ic-cropper .ngx-ic-resize.ngx-ic-right{top:calc(50% - 12px);right:-12px;cursor:ew-resize}:host .ngx-ic-cropper .ngx-ic-resize.ngx-ic-bottomright{bottom:-12px;right:-12px;cursor:nwse-resize}:host .ngx-ic-cropper .ngx-ic-resize.ngx-ic-bottom{bottom:-12px;left:calc(50% - 12px);cursor:ns-resize}:host .ngx-ic-cropper .ngx-ic-resize.ngx-ic-bottomleft{bottom:-12px;left:-12px;cursor:nesw-resize}:host .ngx-ic-cropper .ngx-ic-resize.ngx-ic-left{top:calc(50% - 12px);left:-12px;cursor:ew-resize}:host .ngx-ic-cropper .ngx-ic-resize-bar{position:absolute;z-index:1}:host .ngx-ic-cropper .ngx-ic-resize-bar.ngx-ic-top{top:-11px;left:11px;width:calc(100% - 22px);height:22px;cursor:ns-resize}:host .ngx-ic-cropper .ngx-ic-resize-bar.ngx-ic-right{top:11px;right:-11px;height:calc(100% - 22px);width:22px;cursor:ew-resize}:host .ngx-ic-cropper .ngx-ic-resize-bar.ngx-ic-bottom{bottom:-11px;left:11px;width:calc(100% - 22px);height:22px;cursor:ns-resize}:host .ngx-ic-cropper .ngx-ic-resize-bar.ngx-ic-left{top:11px;left:-11px;height:calc(100% - 22px);width:22px;cursor:ew-resize}:host .ngx-ic-cropper.ngx-ic-round{outline-color:transparent}:host .ngx-ic-cropper.ngx-ic-round:after{border-radius:100%;box-shadow:0 0 0 100vw #ffffff4d;box-shadow:0 0 0 100vw var(--cropper-outline-color, rgba(255, 255, 255, .3))}@media (orientation: portrait){:host .ngx-ic-cropper.ngx-ic-round:after{box-shadow:0 0 0 100vh #ffffff4d;box-shadow:0 0 0 100vh var(--cropper-outline-color, rgba(255, 255, 255, .3))}}:host .ngx-ic-cropper.ngx-ic-round .ngx-ic-move{border-radius:100%}:host.disabled .ngx-ic-cropper .ngx-ic-resize,:host.disabled .ngx-ic-cropper .ngx-ic-resize-bar,:host.disabled .ngx-ic-cropper .ngx-ic-move{display:none}\n"] }]
|
|
1182
1229
|
}], ctorParameters: function () { return [{ type: CropService }, { type: CropperPositionService }, { type: LoadImageService }, { type: i4.DomSanitizer }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { wrapper: [{
|
|
1183
1230
|
type: ViewChild,
|
|
1184
1231
|
args: ['wrapper', { static: true }]
|
|
@@ -1235,6 +1282,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImpor
|
|
|
1235
1282
|
type: Input
|
|
1236
1283
|
}], hideResizeSquares: [{
|
|
1237
1284
|
type: Input
|
|
1285
|
+
}], allowMoveImage: [{
|
|
1286
|
+
type: Input
|
|
1238
1287
|
}], cropper: [{
|
|
1239
1288
|
type: Input
|
|
1240
1289
|
}], alignImage: [{
|
|
@@ -1257,6 +1306,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImpor
|
|
|
1257
1306
|
type: Output
|
|
1258
1307
|
}], loadImageFailed: [{
|
|
1259
1308
|
type: Output
|
|
1309
|
+
}], transformChange: [{
|
|
1310
|
+
type: Output
|
|
1260
1311
|
}], onResize: [{
|
|
1261
1312
|
type: HostListener,
|
|
1262
1313
|
args: ['window:resize']
|
|
@@ -1288,7 +1339,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImpor
|
|
|
1288
1339
|
CommonModule
|
|
1289
1340
|
],
|
|
1290
1341
|
declarations: [
|
|
1291
|
-
ImageCropperComponent
|
|
1342
|
+
ImageCropperComponent,
|
|
1292
1343
|
],
|
|
1293
1344
|
exports: [
|
|
1294
1345
|
ImageCropperComponent
|
|
@@ -1312,5 +1363,5 @@ function base64ToFile(base64Image) {
|
|
|
1312
1363
|
* Generated bundle index. Do not edit.
|
|
1313
1364
|
*/
|
|
1314
1365
|
|
|
1315
|
-
export { ImageCropperComponent, ImageCropperModule, base64ToFile, resizeCanvas };
|
|
1366
|
+
export { CropService, ImageCropperComponent, ImageCropperModule, base64ToFile, resizeCanvas };
|
|
1316
1367
|
//# sourceMappingURL=ngx-image-cropper.mjs.map
|