You can do this in two ways:
- Load the image source using
XMLHttpRequest()
orfetch()
instead of an image element - Convert image element via a canvas element. This will recompress the image causing some quality loss. There is also the “risk” of color/gamma changes depending of the image contains ICC/gamma information and/or the browser support this information. Ie. the image won’t be exact the same as the original – if you just want the original image to be represented as a blob, use method 1.
For method one and since you’re already using promises, you can do:
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)}
});
}
Then get the image as Blob using it like this:
loadXHR("https://stackoverflow.com/questions/42471755/url-to-image").then(function(blob) {
// here the image is a blob
});
or use fetch()
in browsers which support this:
fetch("https://stackoverflow.com/questions/42471755/url-to-image")
.then(function(response) {
return response.blob()
})
.then(function(blob) {
// here the image is a blob
});
The other method will require a canvas:
var img = new Image;
var c = document.createElement("canvas");
var ctx = c.getContext("2d");
img.onload = function() {
c.width = this.naturalWidth; // update canvas size to match image
c.height = this.naturalHeight;
ctx.drawImage(this, 0, 0); // draw in image
c.toBlob(function(blob) { // get content as JPEG blob
// here the image is a blob
}, "image/jpeg", 0.75);
};
img.crossOrigin = ""; // if from different origin
img.src = "https://stackoverflow.com/questions/42471755/url-to-image";