I want to load an image from an url into filereader in order to obtain a data url of that image. I tried to search for the solution on google but i can only find solutions to read them from the file input on a local computer.
Add a comment
|
2 Answers
If you want a usable data-URI representation of the image, then I suggest to load the image in a <img> tag, paint it on a <canvas> then use the .toDataURL() method of the canvas.
Otherwise, you need to use XMLHttpRequest to get the image blob (set the responseType property on the XMLHttpRequest instance and get the blob from the .response property). Then, you can use the FileReader API as usual.
In both cases, the images have to be hosted on the same origin, or CORS must be enabled.
If your server does not support CORS, you can use a proxy that adds CORS headers. In the following example (using the second method), I'm using CORS Anywhere to get CORS headers on any image I want.
var x = new XMLHttpRequest();
x.open('GET', '//cors-anywhere.herokuapp.com/http://www.youtube.com/favicon.ico');
x.responseType = 'blob';
x.onload = function() {
var blob = x.response;
var fr = new FileReader();
fr.onloadend = function() {
var dataUrl = fr.result;
// Paint image, as a proof of concept
var img = document.createElement('img');
img.src = dataUrl;
document.body.appendChild(img);
};
fr.readAsDataURL(blob);
};
x.send();
The previous code can be copy-pasted to the console, and you will see a small image with YouTube's favicon at the bottom of the page. Link to demo: http://jsfiddle.net/4Y7VP/
5 Comments
user1169526
Is there a solution without CORS enabled?
Rob W
@user Use a CORS proxy. See my updated answer, with an example.
Victor Ramos
This is awesome thanks! I've been trying to get the orientation from an remote image's exif but it kept failing since I was using the canvas to get the base64 so that then I could convert it to a blob/file. But this way I can just get the blob directly from the server and then get the orientation from the blob.
Oksana Romaniv
@RobW, are there any caveats to using a proxy server method in production?
Rob W
@OksanaRomaniv Yes. If it is a third-party one, then there is a risk of availability (there is no guarantee that your requests will always be handled as expected). If self-hosted, then you need to make sure that only your application is allowed to use the proxy, and only to a limited, known set of destinations.
Alternative download with fetch:
fetch('http://cors-anywhere.herokuapp.com/https://lorempixel.com/640/480/?
60789', {
headers: {},
}).then((response) => {
return response.blob();
}).then((blob) => {
console.log(blob);
var fr = new FileReader();
fr.onloadend = function() {
var dataUrl = fr.result;
// Paint image, as a proof of concept
var img = document.createElement('img');
img.src = dataUrl;
document.body.appendChild(img);
};
fr.readAsDataURL(blob);
}).catch((e) => console.log(e));
1 Comment
Endless
use https whenever possible. use
URL.createObjectURL instead of using the FileReader to display images.