I am looking to create a file upload feature using Angular2 that will upload the original image but display a resized version as a thumbnail preview.
Prior to uploading, I need the image to be shown as a thumbnail below the file input field. Currently, the image element is displaying a base64 string and everything is functioning properly... HOWEVER!
getInput(fileInput) {
const reader = new FileReader();
reader.onload = ((e: any) => {
this.logo = e.target.result;
});
reader.readAsDataURL(fileInput.target.files[0]);
}
When I attempt to adjust the image size by adding inline CSS with something like width: 33px to the image element, the image quality becomes very poor:
<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 in Angular without losing too much quality?