title: How can I get Blob data from image URL using javascript
body: <p>I have a solution but its taking too much time. Here is my solution.</p>
  
  <pre><code>//------------ Image url to base64 -------------//
  
      function convertImgToBase64(url, callback, outputFormat){
          var img = new Image();
          img.crossOrigin = 'Anonymous';
          img.onload = function(){
          var canvas = document.createElement('CANVAS'),
          ctx = canvas.getContext('2d'), dataURL;
          canvas.height = this.height;
          canvas.width = this.width;
          ctx.drawImage(this, 0, 0);
          dataURL = canvas.toDataURL(outputFormat);
          callback(dataURL);
          canvas = null; 
       };
         img.src = url;
      }
  
     //------------ convert base64 into Blob -------------//
     function dataURItoBlobImg(dataURI) {
       var byteString;
       if (dataURI.split(',')[0].indexOf('base64') &gt;= 0)
          byteString = atob(dataURI.split(',')[1]);
       else
          byteString = unescape(dataURI.split(',')[1]);
       var mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0];
       var ia = new Uint8Array(byteString.length);
       for (var i = 0; i &lt; byteString.length; i++) {
           ia[i] = byteString.charCodeAt(i);
       }
       return new Blob([ia], {type:mimeString});
      }
  </code></pre>
  
  <p>Now thing is first I have to convert image into base64 and after that I can convert into Blob, is there is any way I can directly convert into Blob from image URL.</p>
  
  <p>Thanks.</p>