CODEWITHSUNDEEP
angular
amol
amol

Reputation: 1607

How to resize image in angular 2 before uploading it to server?

I want to resize image with size of 74 x 74, I am using ng2-uploader directive to upload image. If there is any other directive I can use to achieve my requirement please suggest me. Thanks

Upvotes: 14

Views: 29534

Answers (3)

shadcome
shadcome

Reputation: 61

I used npm i ngx-image-compress and it works great.

https://www.npmjs.com/package/ngx-image-compress

Upvotes: 0

Maximilian Riegler
Maximilian Riegler

Reputation: 23526

Have a look at ng2-imageupload. It enables you to automagically resize the image before it gets uploaded.

Just modify your template and add a few directives to the input field and add the hidden image tag for the image upload:

<img [src]="src" [hidden]="!src">
<input type="file" imageUpload (imageSelected)="selected($event)" [resizeOptions]="resizeOptions">

In your component you add the resize options and the selected method:

src: string = "";
resizeOptions: ResizeOptions = {
    resizeMaxHeight: 74,
    resizeMaxWidth: 74
};

selected(imageResult: ImageResult) {
    this.src = imageResult.resized 
      && imageResult.resized.dataURL
      || imageResult.dataURL;
}

Upvotes: 7

Pardeep Jain
Pardeep Jain

Reputation: 86800

Yes we can use ng2-img-cropper for croping the image before uploading also you can customize dimension according to your requirement, you just have to install the package named as ng2-img-cropper from the node using

npm install ng2-img-cropper --save

than just use the component by importing

import {ImageCropperComponent, CropperSettings, Bounds} from 'ng2-img-cropper';

Working plunker here For more info see here,

Upvotes: 6

Related Questions