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:

    .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:

    .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 = 'none';
    document.body.appendChild(a);; // Simulates click

    // 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


  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



// File { 
//    name: filename.jpeg, 
//    lastModified: 1674215820866, 
//    webkitRelativePath: "", 
//    size: 8912, 
//    type: "image/jpeg" 
// }

// File { 
//   name: "filename.json", 
//   lastModified: 1674217178035, 
//   webkitRelativePath: "",
//   size: 560, 
//   type: "application/json" 
// }

Related links