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

Question

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

Answer 1

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;
}

Answer 2

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,

• https://www.npmjs.com/package/ng2-img-cropper