Consultant Informatique Réseau et Internet

15 janvier 2010

Javascript:Afficher une image téléchargée avec XMLHTTPRequest (fr)

Petit code Javascript permettant d’afficher une image téléchargée avec XMLHttpRequest. Cela permet, par exemple, de récupérer les en-têtes HTTP reçues avec l’image et les metadatas inclus dans le fichier image.

English version

Le fait de télécharger l’image XMLHttpRequest permet de récupérer:

  • les en-têtes HTTP de la réponse
  • les données binaires du fichier image

Le code pour récupérer les données binaires facile à trouver en cherchant un peu sur Internet:

//----------------------------------------
var xhr = getXMLHttpRequest();
xhr.onreadystatechange=ProcessResponse;
xhr.open("GET",url, true);
xhr.overrideMimeType('text/plain; charset=x-user-defined');
xhr.send(null);

Les caractères reçus dans “xhr.responseText” ne sont pas des octets, mais des mots (2 octets) avec l’octet de poids fort renseigné avec une valeur qui semble aléatoire. Il faut donc la supprimer. Avec “& 0xff” dans le script ci-dessous. Toutefois, dans le script objet de cette page, ce correctif est intégré dans la fonction d’encodage base64.

//----------------------------------------
function ProcessResponse()
{
   if(xhr.readyState==4)
  { 
    if (xhr.status==200)
    {
        retval ="";

for (var i=0; i<=xhr.responseText.length-1; i++)               retval += String.fromCharCode(xhr.responseText.charCodeAt(i) & 0xff);    }  }

Pour afficher l’image, il suffit de l’affecter les données binaires, encodées en base64, à l’objet image via la propriété “.src”:

//----------------------------------------
var img=document.getElementById("myimg");
img.src="data:image/jpeg;base64," + encode64(xhr.responseText);
img.style.display="";

C’est simple non ?

script complet: jsxhrimg.zip

Pas de commentaire

Pas encore de commentaire.

Flux RSS des commentaires de cet article.

Désolé, les commentaires sont fermés pour le moment.

Propulsé par WordPress