title: Download the image returned by an API
body: <p>I am working with the sportradar api. The api call that I am making, returns a  png image. Till now I have done this.</p>
  
  <pre><code>    const apiCall = (url) =&gt; {
          return axios.get(url).then((data) =&gt; {
              if(data){
                  return Promise.resolve(data);
              }
              else{
                  return Promise.reject();
              }
          });
      }
  
      //all data in data.assetlist
      for(let i=0; i&lt;data.assetlist.length; i++){
          let imageLink = data.assetlist[i].links[12].href;
          let url = `https://api.sportradar.us/nfl-images-p3/ap_premium${imageLink}?api_key=${api_key}`;
          apiCall(url).then((data) =&gt; {
              console.log(data);
              let blob = new Blob(data, {type: "image/png"}); // didn't compile with this line
  
          });
     }
  </code></pre>
  
  <p>The above code is working fine and is returning the data. But the data are weird character, which if I am understanding it correctly, is because of the fact that image is a blob type and I am getting a stream of data.</p>
  
  <p>I took reference from <a href="https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/Sending_and_Receiving_Binary_Data" rel="nofollow noreferrer">here</a> and wrote this line</p>
  
  <pre><code>let blob = new Blob(data, {type: "image/png"});
  </code></pre>
  
  <p>I didn't try this, because I am afraid that the data is so big that it might crash my system (old laptop). If I am doing this right, I wanna know, how to save this blob file into my system as a png file and if not then I wanna know how can i convert this stream of data into an image and can download and save it in a local directory.</p>