Angular: automatically crop image input file before upload

Question

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:

I think you misunderstand how file uploads and such work. You should upload the file, then the server can process it into a square before displaying it again. — PaulProgrammer
– PaulProgrammer, Commented May 10, 2021 at 23:07

Ashot Aleqsanyan · Accepted Answer · 2021-05-10 23:18:09Z

3

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.

edited May 10, 2021 at 23:18

answered May 10, 2021 at 23:12

Ashot Aleqsanyan

4,4732 gold badges20 silver badges32 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Shashi Ranjan Over a year ago

Currently I am receiving as PUT mapping @RequestParam("productImage") MultipartFile productImage in spring-boot controller. My question is which object should I receive the this.croppedImage = event.base64; at spring-boot controller?

Ashot Aleqsanyan Over a year ago

Hmm, actualy it depends what is sending the Frontend to you, but I guess it is a File, not a base64 string(as the header is MultipartFile)

Shashi Ranjan Over a year ago

You have to convert it to file. Finally I was able to get it, You can receive it as @RequestParam("productImage") MultipartFile productImage only if you use

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});       //call backend PUT call using productImageToUpload     }

Shashi Ranjan · Accepted Answer · 2022-10-11 06:14:20Z

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

Collectives™ on Stack Overflow

Angular: automatically crop image input file before upload

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related