comment télécharger un fichier image depuis une URL en utilisant FileReader API?
Sous forme html, nous avons un champ image, pour télécharger un fichier. J'ai suivi le didacticiel de http://blog.teamtreehouse.com/reading-files-using-the-html5-filereader-api et il fonctionne correctement lors du téléchargement d'un fichier image à partir du disque local.
Mais supposons que j'ai une URL d'image dis http://www.google.com/images/logos/ps_logo2.png et que je souhaite télécharger cette image à partir d'une URL distante au lieu d'être téléchargée à partir du disque local.
FileReader L'API fonctionne bien lorsque vous essayez de télécharger une image à partir d'un disque local, mais comment pouvons-nous l'utiliser pour charger des images à l'aide d'URL?
Il est facile de créer un base64 d'image et de l'utiliser pour l'aperçu en définissant dans le champ d'image <img src='data:image/png;base64,iAks4ds__base64__string' id='user_img'>, mais quel flux de travail doit-on adopter pour télécharger des images à partir d'URL distantes à l'aide de jQuery ou JavaScript?
Comment puis-je? Aucune suggestion?
FileReader API est dédiée à fichiers locaux (cf http://www.html5rocks.com/en/tutorials/file/dndfiles/ )
Si vous souhaitez télécharger une image depuis une URL distante et extraire ses données en javascript, vous pouvez utiliser les éléments Image et Canvas, comme expliqué dans la question suivante: Convertissez une image en données binaires en javascript
comme @fiddler answer indique, fileReader est réservé aux fichiers locaux, si vous avez besoin d'obtenir des éléments tels que des images à partir d'URL distantes, vous pouvez suivre une autre approche.
1) en utilisant Http Get request
2) utilisation des fonctions de la toile
mais en raison d'une menace pour la sécurité, les navigateurs n'autorisant pas les scripts à effectuer des requêtes d'origine croisées, seul le DOM lui-même peut le faire. qui peut être résolu par
1) Cors (Partage de ressources d'origine croisée) ?
2) Jsonp ?
maintenant vous êtes curieux donc cors ou jsonp
si vous avez accès au serveur où se trouvent vos objets distants, vous pouvez effectuer la tâche côté serveur ? , qui est recommandé par la plupart.
mais comme question à la recherche d'une solution pouvant gérer toutes les ressources distantes, cors proxy ? T'aider
corsaires gratuits