CODEWITHSUNDEEP
angulartypescript
trachnar
trachnar

Reputation: 91

Angular: automatically crop image input file before upload

I have a function that automatically upload an image that users upload.

What I want is that the function automatically crop the image to make it as a square before uploading : if the image is too wide, it crop from the center to create a square; if the image is too small it zoom in to be a square of minimum 300x300px (it's not a problem that the image will be in low quality in this case).

I have no idea how to proceed, is there a tool in angular to do this ?

Here is my code:

enter image description here

enter image description here

Upvotes: 1

Views: 4003

Answers (2)

Shashi Ranjan
Shashi Ranjan

Reputation: 117

You can use ngx-image-cropper as front end.

HTML

<image-cropper [imageChangedEvent]="imageChangedEvent" [maintainAspectRatio]="true" [aspectRatio]="4 / 3" format="png" (imageCropped)="imageCropped($event)" (cropperReady)="cropperReady()" (loadImageFailed)="loadImageFailed()"></image-cropper>

Component:

import { ImageCroppedEvent, base64ToFile } from 'ngx-image-cropper';

productImageToUpload: any;
imageChangedEvent: any = '';
croppedImage: any = '';

fileChangeEvent(event: any): void {
this.imageChangedEvent = event;
}
imageCropped(event: ImageCroppedEvent) {
this.croppedImage = event.base64;
var originalimageFile = this.imageChangedEvent.target.files[0];
if(originalimageFile){
  var productImageToUpload = new File([base64ToFile(this.croppedImage)], originalimageFile.name, {lastModified: originalimageFile.lastModified, type: originalimageFile.type});
}
}
cropperReady() {
}
loadImageFailed() {}

  addProductImage() {
//call this on any button click
this.productImageService.uploadProductImage(this.productImageToUpload).subscribe(
      res => {
      }, err => {
      }
    );
  }

Service:

public uploadProductImage(productImageToUpload:any): Observable<any> {
    let body = new FormData();
    body.append("productImage", productImageToUpload);
    return this.http.put("/upload", body);
}

Spring Backend:

@RequestParam("productImage") MultipartFile productImage

Upvotes: 0

Ashot Aleqsanyan
Ashot Aleqsanyan

Reputation: 4453

you can use https://www.npmjs.com/package/ngx-image-cropper angular package

for square, you need to use like this

<image-cropper
    [imageChangedEvent]="imageChangedEvent"
    [maintainAspectRatio]="true"
    [resizeToWidth]="300"
    [resizeToHeight]="300"
    [aspectRatio]="1/1"     
    (imageCropped)="imageCropped($event)"
    (imageLoaded)="imageLoaded()"
    (cropperReady)="cropperReady()"
    (loadImageFailed)="loadImageFailed()"
></image-cropper>

actually which properties you need are these several properties from package

[resizeToWidth]="300" Cropped image will be resized to at most this width (in px)
[resizeToHeight]="300"  Cropped image will be resized to at most this height (in px)
[aspectRatio]="1/1"   // 1/1 The width/height ratio (e.g. 1 / 1 for a square, 4 / 3, 16 / 9 ...)

in case you don't want to display this component you can make it absolute and hide it py opacity? Actually, I didn't try it but I think it should work for you.

Also please follow the installation steps from the package documentation before using this example.

Upvotes: 3

Related Questions