Я хочу загрузить изображение с URL-адреса в filereader, чтобы получить URL-адрес данных этого изображения. Я попытался найти решение в google, но я могу найти решения только для чтения из ввода файла на локальном компьютере.Загрузить изображение в FileReader
ответ
Если вы хотите, пригодное для использования данных 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/
- 1. Загрузить изображение с FileReader API и Zip Это Использование JSZip
- 2. как изображение предварительного просмотра с FileReader
- 3. Как загрузить файл изображения с url с помощью API FileReader?
- 4. undefined ссылка на 'FileReader :: FileReader()'
- 5. Я хочу загрузить изображение (камера и т. Д.), Которое было изменено в FileReader из Javascript
- 6. Загрузить и удалить изображение
- 7. загрузить изображение и загрузить
- 8. Как загрузить изображения с FileReader на Amazon s3, используя метеорит
- 9. Javascript FileReader()
- 10. Загрузить изображение и позицию
- 11. Относительный путь FileReader
- 12. Загрузить изображение
- 13. Загрузить изображение в JPanel
- 14. Загрузить изображение в png
- 15. Загрузить изображение в Viewpager
- 16. Загрузить изображение в ASP.NET
- 17. Загрузить изображение в цикле
- 18. Загрузить изображение в bPopup
- 19. Загрузить изображение в Php
- 20. Загрузить изображение в PHP5
- 21. Загрузить изображение в groceryCRUD
- 22. Загрузить изображение в базе:
- 23. Загрузить изображение в php
- 24. Загрузить изображение в MeanJS
- 25. Загрузить изображение в списке
- 26. Загрузить изображение в каталоге
- 27. Загрузить изображение в БД
- 28. Загрузить изображение в ExifInterface
- 29. Загрузить изображение в cakephp
- 30. Загрузить изображение в UICollectionVIewCell
Есть ли разрешение без CORS? – user1169526
@user Используйте прокси CORS. См. Мой обновленный ответ, пример. –