Angular2 Resize Input Image

Question

I want to build a file upload (based on Angular2 - Display image) with angular2 which uploads the original image but displays a resized image as a thumbnail preview.

Before uploading the image has to be displayed as a thumbnail below the file input field. Right now the image element is displaying a base64 string and all works fine... BUT!

getInput(fileInput) {

    const reader  = new FileReader();

    reader.onload = ((e: any) => {
        this.logo = e.target.result;
    });

    reader.readAsDataURL(fileInput.target.files[0]);

}

If I want to change the image size by adding inline css with e.g. width 33px to the image element, the quality of the image is really bad:

<input type="file" class="form-control" (change)="getInput($event)" name="qr.logo"/>
<img [src]="logo" [width]="33" >

Is there a way to resize the image with angular without or with low quality loss?

no, you can't squeeze a big image in 33px and not suffer some quality loss. — toskv
– toskv, Commented May 30, 2017 at 10:18
yes as mentioned you can't really do much about the quality. I would recommend you however, to use the svg format if it's possible. Its quality and resolution scale extremely better with different sizes than other formats such jpg and png. — Unsinkable Sam
– Unsinkable Sam, Commented May 30, 2017 at 12:34

Praneeth Reddy · Accepted Answer · 2017-05-30 17:48:55Z

0

You can use angular2-img-cropper package to resize the image. https://github.com/cstefanache/angular2-img-cropper

answered May 30, 2017 at 17:48

Praneeth Reddy

4243 silver badges7 bronze badges

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

Collectives™ on Stack Overflow

Angular2 Resize Input Image

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related