how to convert image src url to blob

Question

I wanted to convert an image to blob url I currently can do it if user uploads the image through an input tag but what I want is what if I had a src url for the image how can I get that image then convert that image to blob. Thanks in advance.

EDIT: Someone suggested a similar question, I tried to apply a similar method but I am not getting a blob url back I have updated my code to show the following.

Suggested SO URL: convert image into blob using javascript

//this works for when image is uploaded through an input tag
const image_input = document.querySelector("#image_input");
image_input.addEventListener("change", function() {
  const reader = new FileReader();
  reader.addEventListener("load", () => {
    const uploaded_image = reader.result;
    console.log(uploaded_image)
  });
  reader.readAsDataURL(this.files[0]);
});

//Suggested Method

function loadXHR(url) {

  return new Promise(function(resolve, reject) {
    try {
      var xhr = new XMLHttpRequest();
      xhr.open("GET", url);
      xhr.responseType = "blob";
      xhr.onerror = function() {
        reject("Network error.")
      };
      xhr.onload = function() {
        if (xhr.status === 200) {
          resolve(xhr.response)
        } else {
          reject("Loading error:" + xhr.statusText)
        }
      };
      xhr.send();
    } catch (err) {
      reject(err.message)
    }
  });
}

//I want to get the image throught a src link the convert that to blob url
//somthing like this
//convert src to blob
//console.log(blobUrl)

const src = '../img/myImage.jpg'
loadXHR(src).then(function(blob) {
  //I currently only get back an object with size and and type not the blob url     it self
  console.log(blob)
});

<input type="file" title="" id="image_input">

RedYin · Answer 1 · 2022-08-25T15:50:19.127

1

Try this way.

const src = '../img/myImage.jpg'
loadXHR(src).then(function(blob) {
    // Here blob is object, you need to convert it to base64 by using FileReader
    const reader = new FileReader();
    reader.addEventListener("load", () => {
        const uploaded_image = reader.result;
        console.log(uploaded_image);
    });
    reader.readAsDataURL(blob);
});

edited Aug 25 '22 at 15:50

answered Aug 25 '22 at 15:12

RedYin

154
4

I think you miss understood the question – seriously Aug 25 '22 at 15:17
You mean you use 'loadXHR' method, but the callback don't return blob? – RedYin Aug 25 '22 at 15:32
so basically what I want is to convent an image to blob with a relative img url without having to use the input tag. The ```loadXHR``` method I used was just something I tried but its not outputting a base64 blob url when I log it. – seriously Aug 25 '22 at 15:35
nice. I figure out a way too. Take a look under if you have any suggestions on the code – seriously Aug 25 '22 at 15:53

score 1 · Accepted Answer · answered Mar 06 '23 at 13:23

If you just want an URL for a blob, and don't need the actual Base64-encoded string, URL.createObjectURL() may be simpler than the FileReader-magic.

Here this approach is used for providing src for multiple images, while ensuring that only a single HTTP request will be made (even if the browser cache is disabled).

fetch("https://i.imgur.com/gDJ1JhL.jpeg")
  .then(response => response.blob())
  .then(blob => {
    const url = URL.createObjectURL(blob);
    for (const img of document.querySelectorAll("img"))
      img.src = url;
  });

<img style="width:30%"><img style="width:20%"><img style="width:10%">

(Image credit: dimitriartist, linked from Imgur, https://i.stack.imgur.com/sEv3O.jpg)

score 0 · Answer 3 · answered Aug 25 '22 at 15:54

const src = '../img/myImage.jpg'
const toDataURL = url => fetch(url)
  .then(response => response.blob())
  .then(blob => new Promise((resolve, reject) => {
    const reader = new FileReader()
    reader.onloadend = () => resolve(reader.result)
    reader.onerror = reject
    reader.readAsDataURL(blob)
  }))
toDataURL(src)
  .then(dataUrl => {
    console.log(dataUrl)
  })

how to convert image src url to blob

3 Answers3