J'utilise ce pour télécharger une image, et il sort en binaire, en ressemblant à ceci nœud.js le renvoie comme mais maintenant, comment puis-je mettre cela dans une étiquette d'image et le montrer comme une image. Remarque: i ne veut pas vouloir avoir des données de retour comme codage de base64, il doit être binaire. Je vais bien avec la conversion du binaire en base64 sur le côté du client cependant. Lorsque je le transmise au merci edit Ceci semble le convertir en codage de base64, qui commence comme 
lisasdaaurl , il est indiqué typeError Data: Application / Octet- Stream; base64, mais n'affiche pas une image ...
4 Réponses :
Essayez d'utiliser Cela garantira que le type de support du blob est un PNG.
Source: https://developer.mozilla.org/en- US / DOCS / Web / API / BLOB Nouveau blob (données, {Type: 'image / png'}) au lieu de nouveau blob ([DATA])
J'ai essayé cela, cela a créé cette base PNG64, mais elle n'a toujours pas fonctionné, l'image n'a pas affiché
@Sneaky est-ce une réponse de la demande XHR?
JQuery's AJAX () est essentiellement un Superset de XMLHTTPQUEST () . Mais je suppose que ceci est la réponse que vous avez reçue de cette demande à votre script NODEJS. Ensuite, vous avez un problème car il ne semble pas être un jeu de données valide pour une image et même moins pour une base64 codé.
JQuery Ajax ne prend pas en charge les réponses binaires ( ok maintenant, il fait ), il y a une astuce qui utilise la nervure de remplacement (" text / plaine; charset = x-user définie ") pour ramener chaque octet sous forme de caractère dans la chaîne de réponse, puis à la boucle à travers la réponse pour créer un tableau d'octets des données.
Toutefois, avec nue nue XMLHTTPRequest, cela peut être fait facilement avec l'utilisation de la propriété de responsables. P>
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function(){
if (this.readyState == 4 && this.status == 200){
var img = document.getElementById("CaptchaImg");
var url = window.URL || window.webkitURL;
img.src = url.createObjectURL(this.response);
}
}
xhr.open('GET', 'template/bump1/purse.png');
xhr.responseType = 'blob';
xhr.send();
La réponse de Musa est une excellente solution, j'ai implémenté quelque chose de similaire en angulaire et fonctionne bien, lorsque vous définissez responsables = 'blob' Votre réponse ne sera plus une chaîne, ce sera une blob type objet.
Je dois juste ajouter un paramètre supplémentaire à l'objet de l'en-tête (pas sûr s'il est nécessaire dans JQuery). en-têtes: {'type de contenu': "image / png"} ,
Mon objet de demande complet:
Quel que soit le cadre / lib que vous utilisez:
), demandez un type de blob
- Utilisez la fonction suivante pour créer un blob et obtenir une URL de celle-ci
- Définissez votre image
src à cette URL
code: xxx Si, à un moment donné, vous décidez que l'image n'est plus utile, n'oubliez pas de le nettoyer: URL .revokeobjecturl (YourURL)
Je n'ai pas étudié cela beaucoup mais je devine depuis
Application / Octet-Stream dit "Télécharger-moi", vous pouvez essayer de faire untout droit ("application / octet -atre "," image / png "); . Vaut une photo lolJe l'ai essayé, mais ça n'a pas fonctionné.
Au moins, je sais que je n'étais pas fou de le suggérer. Mais au lieu d'essayer de résoudre ce problème comme le problème, essayez peut-être de repenser la logique? Juste en définissant l'attribut
src à l'URL de l'image, vous initiez le téléchargement de l'image afin que Ajax soit juste le faireJe ne veux pas faire cela, car je ne l'ai peut-être pas ici, mais j'envoie également un
formdata () comme pièce jointe qui a une image. I.e. J'essaie de télécharger et de télécharger une image dans le même appel Ajax.J'ai essayé votre solution, mais j'ai utilisé HTTP angular $ HTTP et définir un responsable de «Blob». Ensuite, cela a fonctionné avec votre solution mais en utilisant
lecteur.readasdaaurl (data.data); . Les données réelles étant une propriété sur l'objet de réponse. Je ne sais pas si ce n'est qu'une différence sur la façon dont jQuery et des œuvres angulaires.