title: Angular2 Resize Input Image
body: <p>I want to build a file upload (based on <a href="https://stackoverflow.com/questions/39933340/angular2-display-image">Angular2 - Display image</a>) with angular2 which uploads the original image but displays a resized image as a thumbnail preview. </p>
  
  <p><em>Before uploading</em> 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! </p>
  
  <pre><code>getInput(fileInput) {
  
      const reader  = new FileReader();
  
      reader.onload = ((e: any) =&gt; {
          this.logo = e.target.result;
      });
  
      reader.readAsDataURL(fileInput.target.files[0]);
  
  }
  </code></pre>
  
  <p>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:</p>
  
  <pre><code>&lt;input type="file" class="form-control" (change)="getInput($event)" name="qr.logo"/&gt;
  &lt;img [src]="logo" [width]="33" &gt;
  </code></pre>
  
  <p>Is there a way to resize the image with angular without or with low quality loss? </p>