ngx-image-cropper 7.0.2 → 7.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 +8 -6
- package/esm2020/lib/component/image-cropper.component.mjs +35 -35
- package/esm2020/lib/interfaces/cropper.settings.mjs +2 -1
- package/esm2020/lib/services/crop.service.mjs +13 -15
- package/esm2020/lib/services/cropper-position.service.mjs +11 -12
- package/fesm2015/ngx-image-cropper.mjs +57 -59
- package/fesm2015/ngx-image-cropper.mjs.map +1 -1
- package/fesm2020/ngx-image-cropper.mjs +57 -59
- package/fesm2020/ngx-image-cropper.mjs.map +1 -1
- package/lib/component/image-cropper.component.d.ts +5 -3
- package/lib/interfaces/cropper.settings.d.ts +1 -0
- package/lib/services/crop.service.d.ts +3 -4
- package/lib/services/cropper-position.service.d.ts +1 -1
- package/package.json +2 -1
package/README.md
CHANGED
|
@@ -12,7 +12,7 @@ Only Angular 13+ is supported since image cropper version `6.0.0`.
|
|
|
12
12
|
|
|
13
13
|
### Example usage
|
|
14
14
|
Add the ImageCropperModule to the imports of the module which will be using the Image Cropper.
|
|
15
|
-
```
|
|
15
|
+
``` typescript
|
|
16
16
|
import { NgModule } from '@angular/core';
|
|
17
17
|
import { ImageCropperModule } from 'ngx-image-cropper';
|
|
18
18
|
|
|
@@ -36,7 +36,7 @@ export class YourModule {
|
|
|
36
36
|
```
|
|
37
37
|
|
|
38
38
|
Add the element to your HTML:
|
|
39
|
-
```
|
|
39
|
+
``` html
|
|
40
40
|
<input type="file" (change)="fileChangeEvent($event)" />
|
|
41
41
|
|
|
42
42
|
<image-cropper
|
|
@@ -45,7 +45,7 @@ Add the element to your HTML:
|
|
|
45
45
|
[aspectRatio]="4 / 3"
|
|
46
46
|
format="png"
|
|
47
47
|
(imageCropped)="imageCropped($event)"
|
|
48
|
-
(imageLoaded)="imageLoaded()"
|
|
48
|
+
(imageLoaded)="imageLoaded($event)"
|
|
49
49
|
(cropperReady)="cropperReady()"
|
|
50
50
|
(loadImageFailed)="loadImageFailed()"
|
|
51
51
|
></image-cropper>
|
|
@@ -54,8 +54,9 @@ Add the element to your HTML:
|
|
|
54
54
|
```
|
|
55
55
|
|
|
56
56
|
And add this to your ts file:
|
|
57
|
-
```
|
|
57
|
+
``` typescript
|
|
58
58
|
import { ImageCroppedEvent, LoadedImage } from 'ngx-image-cropper';
|
|
59
|
+
import { DomSanitizer } from '@angular/platform-browser';
|
|
59
60
|
|
|
60
61
|
export class YourComponent {
|
|
61
62
|
imageChangedEvent: any = '';
|
|
@@ -98,6 +99,7 @@ All inputs are optional. Either the `imageChangedEvent`, `imageBase64` or `image
|
|
|
98
99
|
| `imageBase64` | string | | If you don't want to use a file input, you can set a base64 image directly and it will be loaded into the cropper |
|
|
99
100
|
| `imageURL` | string | | If you don't want to use a file input or a base64 you can set an URL to get the image from. If requesting an image from a different domain make sure Cross-Origin Resource Sharing (CORS) is allowed or the image will fail to load. |
|
|
100
101
|
| `imageAltText` | string | | Alternative text for uploaded image for accessibility compliance. |
|
|
102
|
+
| `cropperFrameAriaLabel` | string | 'Crop photo' | Aria-label text for the focusable cropper frame element. |
|
|
101
103
|
| `format` | string | png | Output format (png, jpeg, webp, bmp, ico) (not all browsers support all types, png is always supported, others are optional) |
|
|
102
104
|
| `output` | string | blob | Output type (blob or base64) (blob is the most performant) |
|
|
103
105
|
| `aspectRatio` | number | 1 / 1 | The width / height ratio (e.g. 1 / 1 for a square, 4 / 3, 16 / 9 ...) |
|
|
@@ -122,8 +124,8 @@ All inputs are optional. Either the `imageChangedEvent`, `imageBase64` or `image
|
|
|
122
124
|
| `hideResizeSquares` | boolean | false | Disables the resize-squares at the border of the cropper. This is mostly useful for Touch Devices where you can change the Size of the Cropper via Pinch-To-Zoom |
|
|
123
125
|
| `disabled` | boolean | false | Disables the component and prevents changing the cropper position |
|
|
124
126
|
| `canvasRotation` | number | 0 | Rotate the canvas (1 = 90deg, 2 = 180deg...) |
|
|
125
|
-
| `transform` | ImageTransform | {} | Flip, rotate and scale image
|
|
126
|
-
| `allowMoveImage` | boolean | false | Allow background image to be moved
|
|
127
|
+
| `transform` | ImageTransform | {} | Flip, rotate and scale image. (if `allowMoveImage` is enabled, make sure to use 2-way data binding `[(transform)]="transform"`. |
|
|
128
|
+
| `allowMoveImage` | boolean | false | Allow background image to be moved. When enabled and using the `transform` input, make sure to use 2-way data binding for the transform input (`[(transform)]="transform"`). |
|
|
127
129
|
| `hidden` | boolean | false | Set to true to hide image cropper |
|
|
128
130
|
|
|
129
131
|
### CSS Variables
|