title: Image crop and resize
body: <p>In my angular application i have made image upload and preview using, </p>
  
  <p><strong>Html:</strong></p>
  
  <pre><code>&lt;input type='file' (change)="readUrl($event)"&gt;
  &lt;img [src]="url"&gt;
  </code></pre>
  
  <p><strong>Ts:</strong></p>
  
  <pre><code>  readUrl(event:any) {
    if (event.target.files &amp;&amp; event.target.files[0]) {
      var reader = new FileReader();
      reader.readAsDataURL(event.target.files[0]);
      reader.onload = (event: ProgressEvent) =&gt; {
        this.url = (&lt;FileReader&gt;event.target).result;
      }
  
    }
  }
  </code></pre>
  
  <p>As of now everything works fine..</p>
  
  <p><strong>But</strong> here the uploaded image is very bigger in size and hence i am in the need to implement auto crop and auto resize of the uploaded image that comes in preview, So that user can see the image in clear way..</p>
  
  <p>Kindly help me to achieve the result of <strong>auto crop and resize</strong> without using <strong>jquery or any other libraries</strong>..</p>
  
  <p><strong>Stackblitz:</strong> <a href="https://stackblitz.com/edit/angular-a7ytbh" rel="nofollow noreferrer">https://stackblitz.com/edit/angular-a7ytbh</a></p>
  
  <p><strong>Edit:</strong></p>
  
  <p>Tried with javascript way <a href="https://jsfiddle.net/t3cgw65L/1/" rel="nofollow noreferrer">https://jsfiddle.net/t3cgw65L/1/</a> but here only auto crop functionality is needed.. If we upload an image then only certain part is showing.. It needs to display the face if we upload our picture.. I am in need of uploading profile picture with auto crop and resize as like skype profile picture upload..</p>