Get image data from (blob) from the img tag (opposite method to URL.createObjectURL)

dom, fileapi, html, image, javascript

Solution

The Fetch API is now suitable, as used in the docs:

Using_Fetch#Checking_that_the_fetch_was_successful

https://developer.mozilla.org/en-US/docs/Web/API/Body/blob

Simply:

fetch("picture.png")
.then(res => res.blob())
.then(blob => {
    // use blob...
});

Problem

Inside my HTML code I have following IMG tag: ``` <img src="picture.png" id="picture" /> ``` I would like to create in image Blob object (https://developer.mozilla.org/en-US/docs/Web/API/Blob) (to use it further in FirefoxOS web activity) having it's uri ("picture.png"). I guess I need the method which works in opposite way to URL.createObjectURL: https://developer.mozilla.org/en-US/docs/Web/API/URL.createObjectURL

Original source

Related problems