如何将图像 src url 转换为 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">

Answer 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); });

Answer 2

 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) })