Загрузить изображение в FileReader

Question

Я хочу загрузить изображение с URL-адреса в filereader, чтобы получить URL-адрес данных этого изображения. Я попытался найти решение в google, но я могу найти решения только для чтения из ввода файла на локальном компьютере.

Answer 1

Если вы хотите, пригодное для использования данных URI представления изображения, то я предлагаю, чтобы загрузить изображение в <img> теге, покрасить его на <canvas> затем использовать .toDataURL() метод холста.

В противном случае, вам нужно использовать XMLHttpRequest, чтобы получить пятно изображения (установить responseType свойства на экземпляре XMLHttpRequest и получить пятно от .response собственности). Затем вы можете использовать API FileReader, как обычно.

В обоих случаях изображения должны размещаться на одном и том же происхождении, или CORS должен быть включен.

Если ваш сервер не поддерживает CORS, вы можете использовать прокси-сервер, который добавляет заголовки CORS. В следующем примере (с использованием второго метода) я использую CORS Anywhere, чтобы получить заголовки CORS на любом изображении, которое я хочу.

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(); 

предыдущий код можно скопировать вставить в консоль, и вы увидите маленькое изображение с фавиконки YouTube в нижней части страницы. Ссылка на демонстрационную версию: http://jsfiddle.net/4Y7VP/