title: How to convert live image url into blob in angular?
body: <p>Im working in angular 7 and my requirement is i need to get <code>Width</code>, <code>Height</code> and <code>Size (in how much kb or mb)</code> of the image and also im trying  to convert it into <code>blob</code>.</p>
  
  <p>I tried with below code but im not getting exact output:</p>
  
  <pre><code>var img_url = "http://snook.ca/files/mootools_83_snookca.png";
  
  
   var blob = new Blob([img_url]);
  
   let reader = new FileReader;
  
   reader.readAsDataURL(blob); // read file as data url
   reader.onload = () =&gt; { // when file has loaded
      console.log(reader.result)
      var img:any = new Image();
      img.src = reader.result;
  
      img.onload = () =&gt; {
  
        this.uploaded_image_width = img.width; //to get image width
        this.uploaded_image_height = img.height;  //to get image height           
  
        this.uploaded_image_url = reader.result; //to get blob image
        console.log(reader.result)          
      };          
    } 
  </code></pre>
  
  <p>When im consoling the blob data is coming wrong (<code>console.log(reader.result)</code>) and inside <code>img.onload</code> function is not executing.</p>
  
  <p>I referred this fiddle to achieve this :
  <a href="http://jsfiddle.net/guest271314/9mg5sf7o/" rel="noreferrer">http://jsfiddle.net/guest271314/9mg5sf7o/</a></p>