Как загрузить файл изображения с url с помощью API FileReader?

В форме html у нас есть поле изображения, чтобы загрузить файл. Я следил за учебником из http://blog.teamtreehouse.com/reading-files-using-the-html5-filereader-api, и он отлично работает при загрузке файла изображения с локального диска.

Но предположим, что у меня есть URL-адрес изображения http://www.google.com/images/logos/ps_logo2.png и вы хотите загрузить это изображение с удаленного URL вместо загрузки с локального диска.

FileReader API хорошо работает при попытке загрузки изображения с локального диска, но как мы можем использовать его для загрузки изображений по URL-адресам?

Легко создать base64 изображения и использовать его для предварительного просмотра, установив в поле изображения как <img src='data:image/png;base64,iAks4ds__base64__string' id='user_img'>, но какой рабочий процесс следует принять для загрузки изображений с удаленного URL с помощью jQuery или JavaScript?

Как я могу? Любые предложения?

Ответ 1

FileReader API предназначен для локальных файлов (cf http://www.html5rocks.com/en/tutorials/file/dndfiles/)

Если вы хотите загрузить изображение с удаленного URL-адреса и извлечь его в javascript, вы можете использовать элементы Image и Canvas, как описано в следующем вопросе: Convert изображение в двоичные данные в javascript

Ответ 2

как @fiddler ответ говорит, fileReader предназначен только для локальных файлов, если вам нужно получить такие вещи, как изображения с удаленных URL-адресов, то вы можете следовать другому подходу

1) используя запрос Http Get
2) с использованием возможностей Canvas

но из-за угрозы безопасности браузеры не позволяют сценариям выполнять запросы перекрестного происхождения, только сам DOM может это сделать. это можно решить с помощью

1) Cors (совместное использование ресурсов перекрестного происхождения) ?
2) Jsonp ?

теперь вам любопытно, что cors или jsonp

Если у вас есть доступ к серверу, на котором существуют ваши удаленные вещи, вы можете сделать серверные корни ?, который рекомендуется большинству.

но как вопрос, ищущий решение, которое может обрабатывать любые удаленные ресурсы, прокси-сервер ? поможет вам
свободные прокси-серверы -