Image URL to Blob in JavaScript

OpenJavaScript 0

Last updated: January 20, 2023.

If you have file or file-like data loaded in JavaScript, you can create a new Blob out of it by using the Blob() constructor.

But sometimes, as if often the case with images, your data source is a URL.

For this, you can use the Fetch API to get the image data and process it into a Blob.

To do so, call the blob() method on the response object, which triggers the payload to read to a Blob:

fetch('https://picsum.photos/300/300')
    .then(res => res.blob())
    .then(blob => console.log(blob))
    // Blob {size: 9469, type: 'image/jpeg'}

As you can see, this code alone does all of the hard work of constructing a Blob object from the image.

Now you have all of the Blob methods available to you that can be useful when processing the image data.

For example, you can create a local URL to the Blob image and use it to start a download of the image in the user’s browser:

fetch('https://picsum.photos/300/300')
    .then(res => res.blob())
    .then(blob => handler(blob))


function handler(inputBlob) {

    const url = URL.createObjectURL(inputBlob);
    // Creates URL to the image Blob in memory

    const a = document.createElement('a');
    a.setAttribute('href', url);
    a.setAttribute('download', 'fetched-image.jpeg');
    // Create a download link in HTML

    a.style.display = 'none';
    document.body.appendChild(a);

    a.click(); // Simulates click

    document.body.removeChild(a);
    URL.revokeObjectURL(url);
    // Removes download link and image URL and image from memory

}

You can also now use the FileReader to read the Blob and and output its contents in string format so that it can be saved in localStorage or passed to a server or another page as a URL parameter.

URL to File object

A File object is the same as a Blob object but contains additional metadata about the file contents, such as filename and a timestamp for when the File object was created.

Below is a reusable function for doing that, which uses data from blob to create it:

async function URLtoFile(url) {

  const res = await fetch(url);
  const blob = await res.blob();
  // Gets URL data and read to blob

  console.log(blob);

  const mime = blob.type;
  const ext = mime.slice(mime.lastIndexOf("/") + 1, mime.length);
  // Gets blob MIME type (e.g. image/png) and extracts extension
      
  const file = new File([blob], `filename.${ext}`, {
      type: mime,
  })
  // Creates new File object using blob data, extension and MIME type

  console.log(file);

}

URLtoFile('https://picsum.photos/300/300');
// File { 
//    name: filename.jpeg, 
//    lastModified: 1674215820866, 
//    webkitRelativePath: "", 
//    size: 8912, 
//    type: "image/jpeg" 
// }

URLtoFile('https://httpbin.org/get');
// File { 
//   name: "filename.json", 
//   lastModified: 1674217178035, 
//   webkitRelativePath: "",
//   size: 560, 
//   type: "application/json" 
// }

Related links