ngx-image-cropper

Breaking changes:

• Minimal Angular version 16.0.0
• ImageCropperComponent is now standalone so it should be imported instead of the ImageCropperModule (which has been dropped).

• Add support for SVG images

BREAKING CHANGE: by default the output will be set to blob. Using blob instead of a base64 should decrease the memory usage. If you wish to keep using base64, simply add output="base64" to the <image-cropper> tag.

When using blob as output, an objectUrl will also be provided which can be used to preview the image. However, you'll need to use the DomSanitizer to allow that url to be used in the HTML of your component.

this.croppedImageUrl = this.sanitizer.bypassSecurityTrustUrl(event.objectUrl);

By setting allowMoveImage to true, you can drag the background image.
Set transform.translateUnit to px for the best experience (by default it's set to %).

Only Angular 13+ is supported starting from this version.

• Dropped support for Angular 9
• Prefixed css classes with ngx-ic- to avoid conflicts with external css classes.

Dropped support for Angular 8

BREAKING CHANGES

• The input outputType has been removed, imageCropped output will no longer have a file property. This is because the Blob is actually created from the base64. Calling toBlob on a canvas is slow and affects the performance. Instead this package provides a method called base64ToFile which can be called to create a new Blob based on the base64 image.
• The rotateLeft, rotateRight, flipHorizontal, flipVertical and resetImage methods have been removed. The imageCropped output will no longer contain the transformations that were made. Instead there are 2 new inputs:
  • canvasRotation: Rotates the entire canvas (1 = 90deg, 2 = 180 deg...)
  • transform: This object can contain 4 values:
    • rotate: Rotation in degrees. In contrast to canvasRotation, this will rotate the image within the canvas.
    • scale: Zoom in and out on the image (1 = normal size, 2 = 2x zoom)
    • flipH: Flip horizontally
    • flipV: Flip vertically

New feature:

• Keyboard access:
  • Use tab to set focus to cropper
  • Arrows move the cropper
  • Shift + Arrows makes the cropper larger
  • Shift + Alt + Arrows makes the cropper smaller
  • Number 1 - 9 change the step size (1px - 9px)

BREAKING CHANGES!

• Default output is now base64 instead of both. Using only base64 improves cropping performance significantly. If you need the file format as well, set output to file or both (See README.md)
• Input imageFileChanged has been renamed to imageFile
• Output imageCroppedFile and imageCroppedBase64 have been removed => Use imageCropped instead
• The project's structure has been updated to meet the Angular recommendations.
• Angular version 6 or higher will only be supported

New options:

• containWithinAspectRatio: adds padding around the image to make it fit the chosen aspectRatio
• backgroundColor: adds a background color behind the resulting image

New features/improvements:

• Rotate and flip images in the image cropper
• Set a minimum width of the cropper (relative to the original image's size)
• When resizing an image, the resulting image's quality has improved significantly

• Added cropperReady output. If you wish to overwrite the cropper position, you should wait till after this event was fired. It also fixes issues with the cropper not initialising properly (e.g. in a animating modal)
• Added imagePosition to the imageCropped output. These are the coordinates of the cropper relative to the original image's size

NOTE: When the imageLoaded event is fired, the image becomes visible in the cropper and you should make sure the image cropper becomes visible. However, that doesn't always mean that the cropper itself is ready, the cropperReady notifies you when it is, so you can overwrite the cropper's position for example.

• Added outputType option which allows you to choose between base64, file and both. You may not need the file to be emitted, with this option it can be disabled and it will speed up the cropping significantly. (Defaults to both to avoid breaking changes).
• Added autoCrop option. By default a new image is emitted each time the cropper's position or size is changed. By setting this option to false, you'll need to call the crop method yourself. To get access to the cropper use: @ViewChild(ImageCropperComponent) imageCropper: ImageCropperComponent. Then to trigger the cropper call: imageCropper.crop(); and the cropped image will be emitted by the Outputs.

• New output imageCropped that emits both the base64 and file as well as the cropped image height & width and the cropper's position (more in the readme.md)
• Deprecated imageCroppedBase64 and imageCroppedFile
• Reset the cropper when changing the aspectRatio dynamically