CODEWITHSUNDEEP
angular
PixD
PixD

Reputation: 46

Cropping images in angular

I am searching for a plugin for Angular to crop images before uploading it to the database, I have searched all the day, but all the plugins I have found was even deprecated or not satisfying my needs.

What I specifically want is a plugin that:

  1. Zoom in and out the photo.
  2. Crop the photo.
  3. Change the format of the photo.

the best choice I have found was:

  1. angular-image-cropper
  2. Andy Shora image cropper
  3. ngx-image-cropper

The first one the almost what I want, but unfortunately it's deprecated and I can't use it or don't know how to use it.

I want something similar to this.

Is there a method to use the first one in angular 13? or is there a good alternative for it?

Upvotes: 2

Views: 9909

Answers (3)

Kurt Van den Branden
Kurt Van den Branden

Reputation: 12943

If you're looking for a lightweight Angular image cropper, you might find ngx-smart-cropper to be a great fit. I developed this tool to provide essential cropping functionality for modern Angular apps.

  • Built with angular 19 as a standalone component
  • Very lightweighted - only 60kb
  • Allows limited customisation, cropping and file output
  • Supports mobile touch events

Install it with npm:

npm install ngx-smart-cropper

component.html

<input type="file" accept='image/*' (change)="onFileChange($event)">

<ngx-smart-cropper
  [imageType]="'webp'"
  [cropX]="50"
  [cropY]="50"
  [cropWidth]="150"
  [cropHeight]="150"
  [theme]="'mixed'"
  [imageSource]="imageSource"
  (imageCroppedEvent)="imageCropped($event)"
></ngx-smart-cropper>

<img [src]="croppedImage"/>

component.ts

export class MyComponent {
  croppedImage = '';
  imageSource: string = '';

  onFileChange(event: Event): void {

    const input = event.target as HTMLInputElement;
    if (!input.files || input.files.length === 0) return;

    const file = input.files[0];
    if (file) {
      const reader = new FileReader();
      reader.onload = (e: any) => {
        this.imageSource = e.target.result;
      };
      reader.readAsDataURL(file);
    }
  }

  imageCropped(event: any) {
    this.croppedImage = event;
  }
}

ngx-smart-cropper demo

ngx-smart-cropper npm package

If you want to do further image processing, I recommend using sharp, a high perfomance serverside image processing node.js package.

Upvotes: 1

goonerify
goonerify

Reputation: 1758

A bit late, but the image cropper in this StackBlitz has a zoom option that might be what you're looking for

Upvotes: 2

Joosep Parts
Joosep Parts

Reputation: 6235

Would ngx-image-cropper work for you? Glancing over the docs it should be able to do what you want, just some minor touches to UI side. Snapping to grid, highlight lines etc.

https://stackblitz.com/edit/angular-ngx-image-cropper?file=src%2Fapp%2Fapp.component.ts

Upvotes: 3

Related Questions