Comment puis-je télécharger une image intégrée avec JavaScript?
J'aimerais construire une simple page HTML qui contient du JavaScript pour effectuer un POST de formulaire avec les données de l'image qui est incorporé dans le code HTML vs un fichier du disque.
J'ai regardé ce post qui serait de travailler avec des données, mais je suis perplexe sur les données de l'image.
JavaScript requête post comme la soumission d'un formulaire
source d'informationauteur andyknas
Vous devez vous connecter pour publier un commentaire.
** Mise à JOUR ** Fév. 2014 **
Nouvelle et améliorée de la version disponible en tant que plugin jQuery:
https://github.com/CoeJoder/jquery.image.blob
Utilisation:
Exigences
Ainsi, le navigateur exigences sont:
Remarque: Les images doivent être de la de même origine que votre JavaScript, ou bien le navigateur de stratégie de sécurité empêche les appels à
canvas.toDataURL()
(pour plus de détails, voir ce DONC, la question: Pourquoi n'toile.toDataURL() lancer une exception de sécurité?). Un serveur proxy peut être utilisé pour contourner cette limitation via l'en-tête de réponse d'injection, tel que décrit dans les réponses à ce post.Ici est un jsfiddle du code ci-dessous. Il faut jeter un message d'erreur, parce que ce n'est pas la soumission à un réel URL ('/certains/url'). L'utilisation de firebug ou un outil similaire pour inspecter les données de la demande et de vérifier que l'image est sérialisé en tant que données de formulaire (cliquez sur "Exécuter" après le chargement de la page):
Exemple De Balisage
Le JavaScript
Références
DONC: "Convertir DataURI de Fichier et l'ajout de FormData
En supposant que vous parlez intégré les données de l'image comme http://en.wikipedia.org/wiki/Data_URI_scheme#HTML
****Si mon hypothèse est incorrecte, s'il vous plaît ignorer cette réponse.**
Vous pouvez l'envoyer sous forme de JSON à l'aide de XMLHttpRequest.
Voici un exemple de code: (vous souhaiterez peut-être supprimer la partie en-tête ("data:image/png;base64,') avant de l'envoyer)
Image
Bouton
Script
MODIFIER
@JoeCoder suggère, au lieu de json, vous pouvez également utiliser un objet FormData et de l'envoyer dans un format Binaire. Vérifier son réponse pour plus de détails.