title: Crop the image using JavaScript
body: <p>In my Angular 6 application I am making a file upload option and in preview the uploaded file needs to be displayed with auto cropping and auto resizing.</p>
  
  <p>I have tried the following,</p>
  
  <p><strong>HTML:</strong></p>
  
  <pre><code>&lt;canvas id="canvas"&gt;&lt;/canvas&gt;
  &lt;div style="display:none;"&gt;
    &lt;img id="source" [src]="url" width="300" height="227"&gt;
  &lt;/div&gt;
  &lt;input type='file' (change)="onSelectFile($event)"&gt;
  </code></pre>
  
  <p><strong>File select functtion:</strong></p>
  
  <pre><code>  onSelectFile(event) {
      if (event.target.files &amp;&amp; event.target.files[0]) {
        var reader = new FileReader();
  
        reader.readAsDataURL(event.target.files[0]); // read file as data url
  
        reader.onload = (event) =&gt; { // called once readAsDataURL is completed
          this.url = event.target.result;
        }
  
        const canvas : any =  document.getElementById('canvas');
        const ctx = canvas.getContext('2d');
        const image = document.getElementById('source');
  
        ctx.drawImage(image, 33, 71, 104, 124, 21, 20, 87, 104);
      }
    }
  </code></pre>
  
  <p>In the above I have tried the following with the reference of link <a href="https://jsfiddle.net/8jwq3cs7/" rel="noreferrer">https://jsfiddle.net/8jwq3cs7/</a></p>
  
  <pre><code>      const canvas : any =  document.getElementById('canvas');
        const ctx = canvas.getContext('2d');
        const image = document.getElementById('source');
  
        ctx.drawImage(image, 33, 71, 104, 124, 21, 20, 87, 104);
  </code></pre>
  
  <p>Before using the canvas the original image looks like this: <a href="https://mdn.mozillademos.org/files/5397/rhino.jpg" rel="noreferrer">https://mdn.mozillademos.org/files/5397/rhino.jpg</a></p>
  
  <p>Whereas after using canvas it's like this: <a href="https://jsfiddle.net/8jwq3cs7/" rel="noreferrer">https://jsfiddle.net/8jwq3cs7/</a></p>
  
  <p>But if I choose the image from <code>choose file</code> then I am <strong>unable to see the image</strong> after choosing...</p>
  
  <p><strong>Working example:</strong> <a href="https://stackblitz.com/edit/angular-file-upload-preview-uwpf8f" rel="noreferrer">https://stackblitz.com/edit/angular-file-upload-preview-uwpf8f</a></p>
  
  <p>Even the solution with pure JavaScript alone would also be appreciable if not in the Angular way...</p>
  
  <p><strong>The requirement is,</strong> if I choose a file then the same file needs to be cropped and fit the size automatically in preview...</p>
  
  <p>Kindly help me to achieve the result <strong>without jQuery or any library</strong>...</p>