Angular2 Resize Input Image

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?