ngx-image-cropper 8.0.0 → 8.1.0
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 +46 -43
- package/esm2022/lib/component/cropper.state.mjs +188 -0
- package/esm2022/lib/component/image-cropper.component.mjs +206 -319
- package/esm2022/lib/interfaces/cropper-options.interface.mjs +1 -1
- package/esm2022/lib/interfaces/index.mjs +2 -2
- package/esm2022/lib/interfaces/move-start.interface.mjs +1 -1
- package/esm2022/lib/services/crop.service.mjs +60 -68
- package/esm2022/lib/services/load-image.service.mjs +20 -25
- package/esm2022/lib/utils/cropper-position.utils.mjs +239 -0
- package/esm2022/lib/utils/keyboard.utils.mjs +1 -1
- package/fesm2022/ngx-image-cropper.mjs +729 -687
- package/fesm2022/ngx-image-cropper.mjs.map +1 -1
- package/lib/component/cropper.state.d.ts +29 -0
- package/lib/component/image-cropper.component.d.ts +56 -64
- package/lib/interfaces/cropper-options.interface.d.ts +5 -5
- package/lib/interfaces/index.d.ts +0 -1
- package/lib/interfaces/move-start.interface.d.ts +4 -6
- package/lib/services/crop.service.d.ts +6 -9
- package/lib/services/load-image.service.d.ts +5 -8
- package/lib/utils/cropper-position.utils.d.ts +11 -0
- package/lib/utils/keyboard.utils.d.ts +3 -2
- package/package.json +2 -1
- package/esm2022/lib/interfaces/cropper.settings.mjs +0 -54
- package/esm2022/lib/services/cropper-position.service.mjs +0 -210
- package/esm2022/lib/utils/hammer.utils.mjs +0 -2
- package/lib/interfaces/cropper.settings.d.ts +0 -38
- package/lib/services/cropper-position.service.d.ts +0 -15
- package/lib/utils/hammer.utils.d.ts +0 -7
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
import { CropperOptions } from '../interfaces/cropper-options.interface';
|
|
2
|
+
import { CropperPosition, Dimensions, ImageTransform, LoadedImage } from '../interfaces';
|
|
3
|
+
import { SimpleChanges } from '@angular/core';
|
|
4
|
+
export declare class CropperState {
|
|
5
|
+
options: CropperOptions;
|
|
6
|
+
loadedImage?: LoadedImage;
|
|
7
|
+
maxSize?: Dimensions;
|
|
8
|
+
cropper: CropperPosition;
|
|
9
|
+
transform: ImageTransform;
|
|
10
|
+
cropperScaledMinWidth: number;
|
|
11
|
+
cropperScaledMinHeight: number;
|
|
12
|
+
cropperScaledMaxWidth: number;
|
|
13
|
+
cropperScaledMaxHeight: number;
|
|
14
|
+
stepSize: number;
|
|
15
|
+
setOptionsFromChanges(changes: SimpleChanges): void;
|
|
16
|
+
setOptions(options: Partial<CropperOptions>): void;
|
|
17
|
+
private validateOptions;
|
|
18
|
+
setMaxSize(width: number, height: number): void;
|
|
19
|
+
setCropperScaledMinSize(): void;
|
|
20
|
+
setCropperScaledMinWidth(): void;
|
|
21
|
+
setCropperScaledMinHeight(): void;
|
|
22
|
+
setCropperScaledMaxSize(): void;
|
|
23
|
+
equalsCropperPosition(cropper?: CropperPosition): boolean;
|
|
24
|
+
equalsTransformTranslate(transform: ImageTransform): boolean;
|
|
25
|
+
equalsTransform(transform: ImageTransform): boolean;
|
|
26
|
+
aspectRatioIsCorrect(): boolean;
|
|
27
|
+
resizeCropperPosition(oldMaxSize: Dimensions): void;
|
|
28
|
+
maxSizeCropperPosition(): CropperPosition;
|
|
29
|
+
}
|
|
@@ -1,31 +1,26 @@
|
|
|
1
|
-
import { ChangeDetectorRef, ElementRef, EventEmitter, NgZone, OnChanges, OnInit, SimpleChanges } from '@angular/core';
|
|
2
|
-
import { DomSanitizer,
|
|
3
|
-
import { CropperPosition, Dimensions, ImageCroppedEvent, ImageTransform, LoadedImage } from '../interfaces';
|
|
1
|
+
import { ChangeDetectorRef, ElementRef, EventEmitter, NgZone, OnChanges, OnDestroy, OnInit, SimpleChanges } from '@angular/core';
|
|
2
|
+
import { DomSanitizer, SafeStyle, SafeUrl } from '@angular/platform-browser';
|
|
3
|
+
import { CropperOptions, CropperPosition, Dimensions, ImageCroppedEvent, ImageTransform, LoadedImage } from '../interfaces';
|
|
4
4
|
import { OutputFormat } from '../interfaces/cropper-options.interface';
|
|
5
|
-
import {
|
|
6
|
-
import {
|
|
7
|
-
import {
|
|
8
|
-
import { LoadImageService } from '../services/load-image.service';
|
|
9
|
-
import { BasicEvent } from "../interfaces/basic-event.interface";
|
|
5
|
+
import { CropperState } from './cropper.state';
|
|
6
|
+
import { MoveTypes, Position } from '../interfaces/move-start.interface';
|
|
7
|
+
import { BasicEvent } from '../interfaces/basic-event.interface';
|
|
10
8
|
import * as i0 from "@angular/core";
|
|
11
|
-
export declare class ImageCropperComponent implements OnChanges, OnInit {
|
|
12
|
-
private cropService;
|
|
13
|
-
private cropperPositionService;
|
|
14
|
-
private loadImageService;
|
|
9
|
+
export declare class ImageCropperComponent implements OnChanges, OnInit, OnDestroy {
|
|
15
10
|
private sanitizer;
|
|
16
11
|
private cd;
|
|
17
12
|
private zone;
|
|
18
|
-
private readonly
|
|
19
|
-
private
|
|
13
|
+
private readonly pinchStart$;
|
|
14
|
+
private readonly cropService;
|
|
15
|
+
private readonly loadImageService;
|
|
20
16
|
private setImageMaxSizeRetries;
|
|
21
17
|
private moveStart?;
|
|
22
|
-
private loadedImage?;
|
|
23
18
|
private resizedWhileHidden;
|
|
24
|
-
|
|
19
|
+
protected readonly moveTypes: typeof MoveTypes;
|
|
20
|
+
protected readonly state: CropperState;
|
|
21
|
+
readonly safeImgDataUrl: import("@angular/core").WritableSignal<string | SafeUrl | undefined>;
|
|
25
22
|
safeTransformStyle?: SafeStyle | string;
|
|
26
23
|
marginLeft: SafeStyle | string;
|
|
27
|
-
maxSize: Dimensions;
|
|
28
|
-
moveTypes: typeof MoveTypes;
|
|
29
24
|
imageVisible: boolean;
|
|
30
25
|
wrapper: ElementRef<HTMLDivElement>;
|
|
31
26
|
sourceImage: ElementRef<HTMLDivElement>;
|
|
@@ -34,33 +29,35 @@ export declare class ImageCropperComponent implements OnChanges, OnInit {
|
|
|
34
29
|
imageBase64?: string;
|
|
35
30
|
imageFile?: File;
|
|
36
31
|
imageAltText?: string;
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
32
|
+
options?: Partial<CropperOptions>;
|
|
33
|
+
cropperFrameAriaLabel?: string;
|
|
34
|
+
output?: 'blob' | 'base64';
|
|
35
|
+
format?: OutputFormat;
|
|
36
|
+
autoCrop?: boolean;
|
|
37
|
+
cropper?: CropperPosition;
|
|
38
|
+
transform?: ImageTransform;
|
|
39
|
+
maintainAspectRatio?: boolean;
|
|
40
|
+
aspectRatio?: number;
|
|
41
|
+
resetCropOnAspectRatioChange?: boolean;
|
|
42
|
+
resizeToWidth?: number;
|
|
43
|
+
resizeToHeight?: number;
|
|
44
|
+
cropperMinWidth?: number;
|
|
45
|
+
cropperMinHeight?: number;
|
|
46
|
+
cropperMaxHeight?: number;
|
|
47
|
+
cropperMaxWidth?: number;
|
|
48
|
+
cropperStaticWidth?: number;
|
|
49
|
+
cropperStaticHeight?: number;
|
|
50
|
+
canvasRotation?: number;
|
|
51
|
+
initialStepSize?: number;
|
|
52
|
+
roundCropper?: boolean;
|
|
53
|
+
onlyScaleDown?: boolean;
|
|
54
|
+
imageQuality?: number;
|
|
55
|
+
backgroundColor?: string;
|
|
56
|
+
containWithinAspectRatio?: boolean;
|
|
57
|
+
hideResizeSquares?: boolean;
|
|
61
58
|
allowMoveImage: boolean;
|
|
62
|
-
|
|
63
|
-
alignImage
|
|
59
|
+
checkImageType: boolean;
|
|
60
|
+
alignImage?: 'left' | 'center';
|
|
64
61
|
disabled: boolean;
|
|
65
62
|
hidden: boolean;
|
|
66
63
|
imageCropped: EventEmitter<ImageCroppedEvent>;
|
|
@@ -69,49 +66,44 @@ export declare class ImageCropperComponent implements OnChanges, OnInit {
|
|
|
69
66
|
cropperReady: EventEmitter<Dimensions>;
|
|
70
67
|
loadImageFailed: EventEmitter<void>;
|
|
71
68
|
transformChange: EventEmitter<ImageTransform>;
|
|
72
|
-
|
|
69
|
+
cropperChange: EventEmitter<CropperPosition>;
|
|
70
|
+
get alignImageStyle(): "left" | "center";
|
|
71
|
+
constructor(sanitizer: DomSanitizer, cd: ChangeDetectorRef, zone: NgZone);
|
|
72
|
+
ngOnInit(): void;
|
|
73
73
|
ngOnChanges(changes: SimpleChanges): void;
|
|
74
|
-
private onChangesUpdateSettings;
|
|
75
74
|
private onChangesInputImage;
|
|
76
75
|
private isValidImageChangedEvent;
|
|
77
|
-
private setCssTransform;
|
|
78
|
-
ngOnInit(): void;
|
|
79
76
|
private reset;
|
|
80
77
|
private loadImageFile;
|
|
81
78
|
private loadBase64Image;
|
|
82
79
|
private loadImageFromURL;
|
|
83
80
|
private setLoadedImage;
|
|
84
81
|
loadImageError(error: unknown): void;
|
|
82
|
+
private setCssTransform;
|
|
85
83
|
imageLoadedInView(): void;
|
|
86
84
|
private checkImageMaxSizeRecursively;
|
|
87
85
|
private sourceImageLoaded;
|
|
88
86
|
onResize(): void;
|
|
89
|
-
private activatePinchGesture;
|
|
90
|
-
private resizeCropperPosition;
|
|
91
|
-
resetCropperPosition(): void;
|
|
92
87
|
keyboardAccess(event: KeyboardEvent): void;
|
|
93
88
|
private changeKeyboardStepSize;
|
|
94
89
|
private keyboardMoveCropper;
|
|
95
|
-
startMove(event: Event | BasicEvent, moveType: MoveTypes, position?:
|
|
90
|
+
startMove(event: Event | BasicEvent, moveType: MoveTypes, position?: Position | null): void;
|
|
96
91
|
private initMouseMove;
|
|
97
|
-
startPinch(event: any): void;
|
|
98
92
|
private handleMouseMove;
|
|
99
|
-
onPinch(event: any): void;
|
|
100
|
-
private setMaxSize;
|
|
101
|
-
private setCropperScaledMinSize;
|
|
102
|
-
private setCropperScaledMinWidth;
|
|
103
|
-
private setCropperScaledMinHeight;
|
|
104
|
-
private setCropperScaledMaxSize;
|
|
105
|
-
private checkCropperPosition;
|
|
106
93
|
private handleMouseUp;
|
|
107
|
-
|
|
94
|
+
startPinch(event: TouchEvent): void;
|
|
95
|
+
private initPinch;
|
|
96
|
+
handlePinchMove(event: TouchEvent): void;
|
|
97
|
+
handlePinchStop(): void;
|
|
98
|
+
private setMaxSize;
|
|
99
|
+
private emitCropperPositionChange;
|
|
108
100
|
private doAutoCrop;
|
|
109
101
|
crop(): ImageCroppedEvent | null;
|
|
110
102
|
crop(output: 'base64'): ImageCroppedEvent | null;
|
|
111
103
|
crop(output: 'blob'): Promise<ImageCroppedEvent> | null;
|
|
112
104
|
private cropToBlob;
|
|
113
105
|
private cropToBase64;
|
|
114
|
-
|
|
115
|
-
static ɵfac: i0.ɵɵFactoryDeclaration<ImageCropperComponent,
|
|
116
|
-
static ɵcmp: i0.ɵɵComponentDeclaration<ImageCropperComponent, "image-cropper", never, { "imageChangedEvent": { "alias": "imageChangedEvent"; "required": false; }; "imageURL": { "alias": "imageURL"; "required": false; }; "imageBase64": { "alias": "imageBase64"; "required": false; }; "imageFile": { "alias": "imageFile"; "required": false; }; "imageAltText": { "alias": "imageAltText"; "required": false; }; "cropperFrameAriaLabel": { "alias": "cropperFrameAriaLabel"; "required": false; }; "output": { "alias": "output"; "required": false; }; "format": { "alias": "format"; "required": false; }; "transform": { "alias": "transform"; "required": false; }; "maintainAspectRatio": { "alias": "maintainAspectRatio"; "required": false; }; "aspectRatio": { "alias": "aspectRatio"; "required": false; }; "resetCropOnAspectRatioChange": { "alias": "resetCropOnAspectRatioChange"; "required": false; }; "resizeToWidth": { "alias": "resizeToWidth"; "required": false; }; "resizeToHeight": { "alias": "resizeToHeight"; "required": false; }; "cropperMinWidth": { "alias": "cropperMinWidth"; "required": false; }; "cropperMinHeight": { "alias": "cropperMinHeight"; "required": false; }; "cropperMaxHeight": { "alias": "cropperMaxHeight"; "required": false; }; "cropperMaxWidth": { "alias": "cropperMaxWidth"; "required": false; }; "cropperStaticWidth": { "alias": "cropperStaticWidth"; "required": false; }; "cropperStaticHeight": { "alias": "cropperStaticHeight"; "required": false; }; "canvasRotation": { "alias": "canvasRotation"; "required": false; }; "initialStepSize": { "alias": "initialStepSize"; "required": false; }; "roundCropper": { "alias": "roundCropper"; "required": false; }; "onlyScaleDown": { "alias": "onlyScaleDown"; "required": false; }; "imageQuality": { "alias": "imageQuality"; "required": false; }; "
|
|
106
|
+
ngOnDestroy(): void;
|
|
107
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<ImageCropperComponent, never>;
|
|
108
|
+
static ɵcmp: i0.ɵɵComponentDeclaration<ImageCropperComponent, "image-cropper", never, { "imageChangedEvent": { "alias": "imageChangedEvent"; "required": false; }; "imageURL": { "alias": "imageURL"; "required": false; }; "imageBase64": { "alias": "imageBase64"; "required": false; }; "imageFile": { "alias": "imageFile"; "required": false; }; "imageAltText": { "alias": "imageAltText"; "required": false; }; "options": { "alias": "options"; "required": false; }; "cropperFrameAriaLabel": { "alias": "cropperFrameAriaLabel"; "required": false; }; "output": { "alias": "output"; "required": false; }; "format": { "alias": "format"; "required": false; }; "autoCrop": { "alias": "autoCrop"; "required": false; }; "cropper": { "alias": "cropper"; "required": false; }; "transform": { "alias": "transform"; "required": false; }; "maintainAspectRatio": { "alias": "maintainAspectRatio"; "required": false; }; "aspectRatio": { "alias": "aspectRatio"; "required": false; }; "resetCropOnAspectRatioChange": { "alias": "resetCropOnAspectRatioChange"; "required": false; }; "resizeToWidth": { "alias": "resizeToWidth"; "required": false; }; "resizeToHeight": { "alias": "resizeToHeight"; "required": false; }; "cropperMinWidth": { "alias": "cropperMinWidth"; "required": false; }; "cropperMinHeight": { "alias": "cropperMinHeight"; "required": false; }; "cropperMaxHeight": { "alias": "cropperMaxHeight"; "required": false; }; "cropperMaxWidth": { "alias": "cropperMaxWidth"; "required": false; }; "cropperStaticWidth": { "alias": "cropperStaticWidth"; "required": false; }; "cropperStaticHeight": { "alias": "cropperStaticHeight"; "required": false; }; "canvasRotation": { "alias": "canvasRotation"; "required": false; }; "initialStepSize": { "alias": "initialStepSize"; "required": false; }; "roundCropper": { "alias": "roundCropper"; "required": false; }; "onlyScaleDown": { "alias": "onlyScaleDown"; "required": false; }; "imageQuality": { "alias": "imageQuality"; "required": false; }; "backgroundColor": { "alias": "backgroundColor"; "required": false; }; "containWithinAspectRatio": { "alias": "containWithinAspectRatio"; "required": false; }; "hideResizeSquares": { "alias": "hideResizeSquares"; "required": false; }; "allowMoveImage": { "alias": "allowMoveImage"; "required": false; }; "checkImageType": { "alias": "checkImageType"; "required": false; }; "alignImage": { "alias": "alignImage"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "hidden": { "alias": "hidden"; "required": false; }; }, { "imageCropped": "imageCropped"; "startCropImage": "startCropImage"; "imageLoaded": "imageLoaded"; "cropperReady": "cropperReady"; "loadImageFailed": "loadImageFailed"; "transformChange": "transformChange"; "cropperChange": "cropperChange"; }, never, never, true, never>;
|
|
117
109
|
}
|
|
@@ -1,9 +1,9 @@
|
|
|
1
|
-
import { ImageTransform } from './image-transform.interface';
|
|
2
1
|
export interface CropperOptions {
|
|
3
2
|
format: OutputFormat;
|
|
3
|
+
output: OutputType;
|
|
4
|
+
autoCrop: boolean;
|
|
4
5
|
maintainAspectRatio: boolean;
|
|
5
6
|
resetCropOnAspectRatioChange: boolean;
|
|
6
|
-
transform: ImageTransform;
|
|
7
7
|
aspectRatio: number;
|
|
8
8
|
resizeToWidth: number;
|
|
9
9
|
resizeToHeight: number;
|
|
@@ -14,15 +14,15 @@ export interface CropperOptions {
|
|
|
14
14
|
cropperStaticWidth: number;
|
|
15
15
|
cropperStaticHeight: number;
|
|
16
16
|
canvasRotation: number;
|
|
17
|
-
initialStepSize: number;
|
|
18
17
|
roundCropper: boolean;
|
|
19
18
|
onlyScaleDown: boolean;
|
|
20
19
|
imageQuality: number;
|
|
21
|
-
|
|
22
|
-
backgroundColor: string;
|
|
20
|
+
backgroundColor: string | null;
|
|
23
21
|
containWithinAspectRatio: boolean;
|
|
24
22
|
hideResizeSquares: boolean;
|
|
25
23
|
alignImage: 'left' | 'center';
|
|
24
|
+
cropperFrameAriaLabel: string | undefined;
|
|
25
|
+
checkImageType: boolean;
|
|
26
26
|
}
|
|
27
27
|
export type OutputFormat = 'png' | 'jpeg' | 'bmp' | 'webp' | 'ico';
|
|
28
28
|
export type OutputType = 'base64' | 'blob';
|
|
@@ -5,4 +5,3 @@ export { ImageCroppedEvent } from './image-cropped-event.interface';
|
|
|
5
5
|
export { MoveStart } from './move-start.interface';
|
|
6
6
|
export { ImageTransform } from './image-transform.interface';
|
|
7
7
|
export { LoadedImage } from './loaded-image.interface';
|
|
8
|
-
export { CropperSettings } from './cropper.settings';
|
|
@@ -1,13 +1,11 @@
|
|
|
1
|
-
import { ImageTransform } from './
|
|
1
|
+
import { CropperPosition, ImageTransform } from './';
|
|
2
|
+
export type Position = 'left' | 'topleft' | 'top' | 'topright' | 'right' | 'bottomright' | 'bottom' | 'bottomleft' | 'center';
|
|
2
3
|
export interface MoveStart {
|
|
3
4
|
active: boolean;
|
|
4
5
|
type: MoveTypes | null;
|
|
5
|
-
position:
|
|
6
|
+
position: Position | null;
|
|
6
7
|
transform?: ImageTransform;
|
|
7
|
-
|
|
8
|
-
y1: number;
|
|
9
|
-
x2: number;
|
|
10
|
-
y2: number;
|
|
8
|
+
cropper: CropperPosition;
|
|
11
9
|
clientX: number;
|
|
12
10
|
clientY: number;
|
|
13
11
|
}
|
|
@@ -1,16 +1,13 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import {
|
|
3
|
-
import * as i0 from "@angular/core";
|
|
1
|
+
import { CropperOptions, ImageCroppedEvent } from '../interfaces';
|
|
2
|
+
import { CropperState } from '../component/cropper.state';
|
|
4
3
|
export declare class CropService {
|
|
5
|
-
crop(
|
|
6
|
-
crop(
|
|
4
|
+
crop(cropperState: CropperState, output: 'blob'): Promise<ImageCroppedEvent> | null;
|
|
5
|
+
crop(cropperState: CropperState, output: 'base64'): ImageCroppedEvent | null;
|
|
7
6
|
private cropToBlob;
|
|
8
7
|
private getCanvasTranslate;
|
|
9
8
|
private getRatio;
|
|
10
9
|
private getImagePosition;
|
|
11
10
|
private getOffsetImagePosition;
|
|
12
|
-
getResizeRatio(width: number, height: number,
|
|
13
|
-
getQuality(
|
|
14
|
-
static ɵfac: i0.ɵɵFactoryDeclaration<CropService, never>;
|
|
15
|
-
static ɵprov: i0.ɵɵInjectableDeclaration<CropService>;
|
|
11
|
+
getResizeRatio(width: number, height: number, options: CropperOptions): number;
|
|
12
|
+
getQuality(options: CropperOptions): number;
|
|
16
13
|
}
|
|
@@ -1,20 +1,17 @@
|
|
|
1
1
|
import { LoadedImage } from '../interfaces';
|
|
2
|
-
import {
|
|
3
|
-
import * as i0 from "@angular/core";
|
|
2
|
+
import { CropperState } from '../component/cropper.state';
|
|
4
3
|
export declare class LoadImageService {
|
|
5
4
|
private autoRotateSupported;
|
|
6
|
-
loadImageFile(file: File, cropperSettings:
|
|
5
|
+
loadImageFile(file: File, cropperSettings: CropperState): Promise<LoadedImage>;
|
|
7
6
|
private checkImageTypeAndLoadImageFromArrayBuffer;
|
|
8
7
|
private isValidImageType;
|
|
9
|
-
loadImageFromURL(url: string, cropperSettings:
|
|
10
|
-
loadBase64Image(imageBase64: string, cropperSettings:
|
|
8
|
+
loadImageFromURL(url: string, cropperSettings: CropperState): Promise<LoadedImage>;
|
|
9
|
+
loadBase64Image(imageBase64: string, cropperSettings: CropperState): Promise<LoadedImage>;
|
|
11
10
|
private base64ToArrayBuffer;
|
|
12
11
|
private loadImageFromArrayBuffer;
|
|
13
12
|
private getSvgImageSize;
|
|
14
13
|
private transformImageFromArrayBuffer;
|
|
15
|
-
transformLoadedImage(loadedImage: Partial<LoadedImage>,
|
|
14
|
+
transformLoadedImage(loadedImage: Partial<LoadedImage>, cropperState: CropperState, forceTransform?: boolean): Promise<LoadedImage>;
|
|
16
15
|
private loadImageFromObjectUrl;
|
|
17
16
|
private getTransformedSize;
|
|
18
|
-
static ɵfac: i0.ɵɵFactoryDeclaration<LoadImageService, never>;
|
|
19
|
-
static ɵprov: i0.ɵɵInjectableDeclaration<LoadImageService>;
|
|
20
17
|
}
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import { CropperPosition, MoveStart } from '../interfaces';
|
|
2
|
+
import { CropperState } from '../component/cropper.state';
|
|
3
|
+
import { BasicEvent } from '../interfaces/basic-event.interface';
|
|
4
|
+
export declare function checkCropperPosition(cropperPosition: CropperPosition, cropperState: CropperState, maintainSize: boolean): CropperPosition;
|
|
5
|
+
export declare function checkCropperSizeRestriction(cropperPosition: CropperPosition, cropperState: CropperState): CropperPosition;
|
|
6
|
+
export declare function checkCropperWithinMaxSizeBounds(position: CropperPosition, cropperState: CropperState, maintainSize?: boolean): CropperPosition;
|
|
7
|
+
export declare function moveCropper(event: Event | BasicEvent, moveStart: MoveStart): CropperPosition;
|
|
8
|
+
export declare function resizeCropper(event: Event | BasicEvent, moveStart: MoveStart, cropperState: CropperState): CropperPosition;
|
|
9
|
+
export declare function checkAspectRatio(position: string, cropperPosition: CropperPosition, cropperState: CropperState): CropperPosition;
|
|
10
|
+
export declare function getClientX(event: Event | BasicEvent | TouchEvent): number;
|
|
11
|
+
export declare function getClientY(event: Event | BasicEvent | TouchEvent): number;
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import { BasicEvent } from "../interfaces/basic-event.interface";
|
|
2
|
-
|
|
3
|
-
export declare function
|
|
2
|
+
import { Position } from "../interfaces/move-start.interface";
|
|
3
|
+
export declare function getPositionForKey(key: string): Position;
|
|
4
|
+
export declare function getInvertedPositionForKey(key: string): Position;
|
|
4
5
|
export declare function getEventForKey(key: string, stepSize: number): BasicEvent;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "ngx-image-cropper",
|
|
3
|
-
"version": "8.
|
|
3
|
+
"version": "8.1.0",
|
|
4
4
|
"description": "An image cropper for Angular",
|
|
5
5
|
"author": "Martijn Willekens",
|
|
6
6
|
"repository": {
|
|
@@ -15,6 +15,7 @@
|
|
|
15
15
|
"angular",
|
|
16
16
|
"angular 16",
|
|
17
17
|
"angular 17",
|
|
18
|
+
"angular 18",
|
|
18
19
|
"ionic",
|
|
19
20
|
"ionic-angular",
|
|
20
21
|
"cropper",
|
|
@@ -1,54 +0,0 @@
|
|
|
1
|
-
export class CropperSettings {
|
|
2
|
-
constructor() {
|
|
3
|
-
// From options
|
|
4
|
-
this.format = 'png';
|
|
5
|
-
this.output = 'blob';
|
|
6
|
-
this.maintainAspectRatio = true;
|
|
7
|
-
this.transform = {};
|
|
8
|
-
this.aspectRatio = 1;
|
|
9
|
-
this.resetCropOnAspectRatioChange = true;
|
|
10
|
-
this.resizeToWidth = 0;
|
|
11
|
-
this.resizeToHeight = 0;
|
|
12
|
-
this.cropperMinWidth = 0;
|
|
13
|
-
this.cropperMinHeight = 0;
|
|
14
|
-
this.cropperMaxHeight = 0;
|
|
15
|
-
this.cropperMaxWidth = 0;
|
|
16
|
-
this.cropperStaticWidth = 0;
|
|
17
|
-
this.cropperStaticHeight = 0;
|
|
18
|
-
this.canvasRotation = 0;
|
|
19
|
-
this.initialStepSize = 3;
|
|
20
|
-
this.roundCropper = false;
|
|
21
|
-
this.onlyScaleDown = false;
|
|
22
|
-
this.imageQuality = 92;
|
|
23
|
-
this.autoCrop = true;
|
|
24
|
-
this.backgroundColor = null;
|
|
25
|
-
this.containWithinAspectRatio = false;
|
|
26
|
-
this.hideResizeSquares = false;
|
|
27
|
-
this.alignImage = 'center';
|
|
28
|
-
this.cropperFrameAriaLabel = 'Crop photo';
|
|
29
|
-
// Internal
|
|
30
|
-
this.cropperScaledMinWidth = 20;
|
|
31
|
-
this.cropperScaledMinHeight = 20;
|
|
32
|
-
this.cropperScaledMaxWidth = 20;
|
|
33
|
-
this.cropperScaledMaxHeight = 20;
|
|
34
|
-
this.stepSize = this.initialStepSize;
|
|
35
|
-
}
|
|
36
|
-
setOptions(options) {
|
|
37
|
-
Object.keys(options)
|
|
38
|
-
.filter((k) => k in this)
|
|
39
|
-
.forEach((k) => this[k] = options[k]);
|
|
40
|
-
this.validateOptions();
|
|
41
|
-
}
|
|
42
|
-
setOptionsFromChanges(changes) {
|
|
43
|
-
Object.keys(changes)
|
|
44
|
-
.filter((k) => k in this)
|
|
45
|
-
.forEach((k) => this[k] = changes[k].currentValue);
|
|
46
|
-
this.validateOptions();
|
|
47
|
-
}
|
|
48
|
-
validateOptions() {
|
|
49
|
-
if (this.maintainAspectRatio && !this.aspectRatio) {
|
|
50
|
-
throw new Error('`aspectRatio` should > 0 when `maintainAspectRatio` is enabled');
|
|
51
|
-
}
|
|
52
|
-
}
|
|
53
|
-
}
|
|
54
|
-
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiY3JvcHBlci5zZXR0aW5ncy5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL25neC1pbWFnZS1jcm9wcGVyL3NyYy9saWIvaW50ZXJmYWNlcy9jcm9wcGVyLnNldHRpbmdzLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUlBLE1BQU0sT0FBTyxlQUFlO0lBQTVCO1FBRUUsZUFBZTtRQUNmLFdBQU0sR0FBaUIsS0FBSyxDQUFDO1FBQzdCLFdBQU0sR0FBZSxNQUFNLENBQUM7UUFDNUIsd0JBQW1CLEdBQUcsSUFBSSxDQUFDO1FBQzNCLGNBQVMsR0FBbUIsRUFBRSxDQUFDO1FBQy9CLGdCQUFXLEdBQUcsQ0FBQyxDQUFDO1FBQ2hCLGlDQUE0QixHQUFHLElBQUksQ0FBQztRQUNwQyxrQkFBYSxHQUFHLENBQUMsQ0FBQztRQUNsQixtQkFBYyxHQUFHLENBQUMsQ0FBQztRQUNuQixvQkFBZSxHQUFHLENBQUMsQ0FBQztRQUNwQixxQkFBZ0IsR0FBRyxDQUFDLENBQUM7UUFDckIscUJBQWdCLEdBQUcsQ0FBQyxDQUFDO1FBQ3JCLG9CQUFlLEdBQUcsQ0FBQyxDQUFDO1FBQ3BCLHVCQUFrQixHQUFHLENBQUMsQ0FBQztRQUN2Qix3QkFBbUIsR0FBRyxDQUFDLENBQUM7UUFDeEIsbUJBQWMsR0FBRyxDQUFDLENBQUM7UUFDbkIsb0JBQWUsR0FBRyxDQUFDLENBQUM7UUFDcEIsaUJBQVksR0FBRyxLQUFLLENBQUM7UUFDckIsa0JBQWEsR0FBRyxLQUFLLENBQUM7UUFDdEIsaUJBQVksR0FBRyxFQUFFLENBQUM7UUFDbEIsYUFBUSxHQUFHLElBQUksQ0FBQztRQUNoQixvQkFBZSxHQUFrQixJQUFJLENBQUM7UUFDdEMsNkJBQXdCLEdBQUcsS0FBSyxDQUFDO1FBQ2pDLHNCQUFpQixHQUFHLEtBQUssQ0FBQztRQUMxQixlQUFVLEdBQXNCLFFBQVEsQ0FBQztRQUN6QywwQkFBcUIsR0FBRyxZQUFZLENBQUM7UUFFckMsV0FBVztRQUNYLDBCQUFxQixHQUFHLEVBQUUsQ0FBQztRQUMzQiwyQkFBc0IsR0FBRyxFQUFFLENBQUM7UUFDNUIsMEJBQXFCLEdBQUcsRUFBRSxDQUFDO1FBQzNCLDJCQUFzQixHQUFHLEVBQUUsQ0FBQztRQUM1QixhQUFRLEdBQUcsSUFBSSxDQUFDLGVBQWUsQ0FBQztJQXFCbEMsQ0FBQztJQW5CQyxVQUFVLENBQUMsT0FBZ0M7UUFDekMsTUFBTSxDQUFDLElBQUksQ0FBQyxPQUFPLENBQUM7YUFDakIsTUFBTSxDQUFDLENBQUMsQ0FBQyxFQUFFLEVBQUUsQ0FBQyxDQUFDLElBQUksSUFBSSxDQUFDO2FBQ3hCLE9BQU8sQ0FBQyxDQUFDLENBQUMsRUFBRSxFQUFFLENBQUUsSUFBWSxDQUFDLENBQUMsQ0FBQyxHQUFJLE9BQWUsQ0FBQyxDQUFDLENBQUMsQ0FBQyxDQUFDO1FBQzFELElBQUksQ0FBQyxlQUFlLEVBQUUsQ0FBQztJQUN6QixDQUFDO0lBRUQscUJBQXFCLENBQUMsT0FBc0I7UUFDMUMsTUFBTSxDQUFDLElBQUksQ0FBQyxPQUFPLENBQUM7YUFDakIsTUFBTSxDQUFDLENBQUMsQ0FBQyxFQUFFLEVBQUUsQ0FBQyxDQUFDLElBQUksSUFBSSxDQUFDO2FBQ3hCLE9BQU8sQ0FBQyxDQUFDLENBQUMsRUFBRSxFQUFFLENBQUUsSUFBWSxDQUFDLENBQUMsQ0FBQyxHQUFHLE9BQU8sQ0FBQyxDQUFDLENBQUMsQ0FBQyxZQUFZLENBQUMsQ0FBQztRQUM5RCxJQUFJLENBQUMsZUFBZSxFQUFFLENBQUM7SUFDekIsQ0FBQztJQUVPLGVBQWU7UUFDckIsSUFBSSxJQUFJLENBQUMsbUJBQW1CLElBQUksQ0FBQyxJQUFJLENBQUMsV0FBVyxFQUFFO1lBQ2pELE1BQU0sSUFBSSxLQUFLLENBQUMsZ0VBQWdFLENBQUMsQ0FBQztTQUNuRjtJQUNILENBQUM7Q0FDRiIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENyb3BwZXJPcHRpb25zLCBPdXRwdXRGb3JtYXQsIE91dHB1dFR5cGUgfSBmcm9tICcuL2Nyb3BwZXItb3B0aW9ucy5pbnRlcmZhY2UnO1xuaW1wb3J0IHsgSW1hZ2VUcmFuc2Zvcm0gfSBmcm9tICcuL2ltYWdlLXRyYW5zZm9ybS5pbnRlcmZhY2UnO1xuaW1wb3J0IHsgU2ltcGxlQ2hhbmdlcyB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuXG5leHBvcnQgY2xhc3MgQ3JvcHBlclNldHRpbmdzIHtcblxuICAvLyBGcm9tIG9wdGlvbnNcbiAgZm9ybWF0OiBPdXRwdXRGb3JtYXQgPSAncG5nJztcbiAgb3V0cHV0OiBPdXRwdXRUeXBlID0gJ2Jsb2InO1xuICBtYWludGFpbkFzcGVjdFJhdGlvID0gdHJ1ZTtcbiAgdHJhbnNmb3JtOiBJbWFnZVRyYW5zZm9ybSA9IHt9O1xuICBhc3BlY3RSYXRpbyA9IDE7XG4gIHJlc2V0Q3JvcE9uQXNwZWN0UmF0aW9DaGFuZ2UgPSB0cnVlO1xuICByZXNpemVUb1dpZHRoID0gMDtcbiAgcmVzaXplVG9IZWlnaHQgPSAwO1xuICBjcm9wcGVyTWluV2lkdGggPSAwO1xuICBjcm9wcGVyTWluSGVpZ2h0ID0gMDtcbiAgY3JvcHBlck1heEhlaWdodCA9IDA7XG4gIGNyb3BwZXJNYXhXaWR0aCA9IDA7XG4gIGNyb3BwZXJTdGF0aWNXaWR0aCA9IDA7XG4gIGNyb3BwZXJTdGF0aWNIZWlnaHQgPSAwO1xuICBjYW52YXNSb3RhdGlvbiA9IDA7XG4gIGluaXRpYWxTdGVwU2l6ZSA9IDM7XG4gIHJvdW5kQ3JvcHBlciA9IGZhbHNlO1xuICBvbmx5U2NhbGVEb3duID0gZmFsc2U7XG4gIGltYWdlUXVhbGl0eSA9IDkyO1xuICBhdXRvQ3JvcCA9IHRydWU7XG4gIGJhY2tncm91bmRDb2xvcjogc3RyaW5nIHwgbnVsbCA9IG51bGw7XG4gIGNvbnRhaW5XaXRoaW5Bc3BlY3RSYXRpbyA9IGZhbHNlO1xuICBoaWRlUmVzaXplU3F1YXJlcyA9IGZhbHNlO1xuICBhbGlnbkltYWdlOiAnbGVmdCcgfCAnY2VudGVyJyA9ICdjZW50ZXInO1xuICBjcm9wcGVyRnJhbWVBcmlhTGFiZWwgPSAnQ3JvcCBwaG90byc7XG5cbiAgLy8gSW50ZXJuYWxcbiAgY3JvcHBlclNjYWxlZE1pbldpZHRoID0gMjA7XG4gIGNyb3BwZXJTY2FsZWRNaW5IZWlnaHQgPSAyMDtcbiAgY3JvcHBlclNjYWxlZE1heFdpZHRoID0gMjA7XG4gIGNyb3BwZXJTY2FsZWRNYXhIZWlnaHQgPSAyMDtcbiAgc3RlcFNpemUgPSB0aGlzLmluaXRpYWxTdGVwU2l6ZTtcblxuICBzZXRPcHRpb25zKG9wdGlvbnM6IFBhcnRpYWw8Q3JvcHBlck9wdGlvbnM+KTogdm9pZCB7XG4gICAgT2JqZWN0LmtleXMob3B0aW9ucylcbiAgICAgIC5maWx0ZXIoKGspID0+IGsgaW4gdGhpcylcbiAgICAgIC5mb3JFYWNoKChrKSA9PiAodGhpcyBhcyBhbnkpW2tdID0gKG9wdGlvbnMgYXMgYW55KVtrXSk7XG4gICAgdGhpcy52YWxpZGF0ZU9wdGlvbnMoKTtcbiAgfVxuXG4gIHNldE9wdGlvbnNGcm9tQ2hhbmdlcyhjaGFuZ2VzOiBTaW1wbGVDaGFuZ2VzKTogdm9pZCB7XG4gICAgT2JqZWN0LmtleXMoY2hhbmdlcylcbiAgICAgIC5maWx0ZXIoKGspID0+IGsgaW4gdGhpcylcbiAgICAgIC5mb3JFYWNoKChrKSA9PiAodGhpcyBhcyBhbnkpW2tdID0gY2hhbmdlc1trXS5jdXJyZW50VmFsdWUpO1xuICAgIHRoaXMudmFsaWRhdGVPcHRpb25zKCk7XG4gIH1cblxuICBwcml2YXRlIHZhbGlkYXRlT3B0aW9ucygpOiB2b2lkIHtcbiAgICBpZiAodGhpcy5tYWludGFpbkFzcGVjdFJhdGlvICYmICF0aGlzLmFzcGVjdFJhdGlvKSB7XG4gICAgICB0aHJvdyBuZXcgRXJyb3IoJ2Bhc3BlY3RSYXRpb2Agc2hvdWxkID4gMCB3aGVuIGBtYWludGFpbkFzcGVjdFJhdGlvYCBpcyBlbmFibGVkJyk7XG4gICAgfVxuICB9XG59XG4iXX0=
|