web-dev-qa-db-fra.com

Comment afficher une image reçue sous forme de tableau d'octets dans Angular JS

J'ai une application côté serveur qui va retourner une image. Ce sont les en-têtes de réponse:

Content-Disposition: attachment; filename=8822a009-944e-43f4-999b-d297198d302a;1.0_low-res
Content-Length: 502343
Content-Type: image/png
Date: Mon, 03 Aug 2015 19:13:39 GMT
Server: Apache-Coyote/1.1

En angulaire, j'ai besoin d'afficher l'image. Lors de l'obtention de l'image, j'utilise angularJS $http pour appeler le serveur et mettre le résultat dans le champ d'application, mais je n'atteins jamais la fonction de réussite de $http. L'exécution de cet appel à partir du postman renvoie l'image normalement. Je suis curieux de savoir comment obtenir Angular pour afficher l'image.

Voici comment j'affiche l'image:

<img ng-src={{image}} />

Voici l'appel pour obtenir l'image du serveur:

$http.get(url, {responseType: "arraybuffer"})
    .success(function(data) {
        $scope.image= data;
    }
)
javascriptangularjsimagebytearrayhttpresponse
7
Loshmeey

Je suis d'accord avec la réponse de Bellu en ce sens que vous devriez utiliser la fonction .then plutôt que la fonction .success sur la promesse renvoyée du $http.get. Cependant, j'imagine que vous aurez toujours un problème avec votre référence ng-src car vous ne lui fournissez pas d'URL, mais une référence à votre tableau d'octets.

Pour lier votre référence ng-src à un tableau d'octets conservés en mémoire sur le client, votre liaison doit prendre la forme suivante:

<img ng-src="data:image/JPEG;base64,{{image}}">

Modifier

Comme je ne l'ai jamais mentionné explicitement, la liaison ng-src ci-dessus suppose que vos données d'image sont au format base64. HarrisonA a fourni une méthode ci-dessous pour convertir le tableau s'il n'est pas déjà au format base64.

9
jdmcnair

Je voulais juste ajouter à la réponse de jdmcnair et au commentaire de Loshmeey:

Vous trouverez ci-dessous un lien vers la fonction que j'ai utilisée pour convertir le tampon de tableau en chaîne de base 64. 

ArrayBuffer en chaîne encodée en base64

La fonction:

function _arrayBufferToBase64( buffer ) {
  var binary = '';
  var bytes = new Uint8Array( buffer );
  var len = bytes.byteLength;
  for (var i = 0; i < len; i++) {
    binary += String.fromCharCode( bytes[ i ] );
  }
  return window.btoa( binary );
}

J'ai utilisé cette fonction dans mon contrôleur angulaire puis transmis le résultat (à l'aide d'une variable $ scope) à l'élément img de mon fichier html. 

7
HarrisonA
  • Je pense que vous devriez utiliser le rappel then, dans la documentation angulaire ils disent que le rappel success a été Déconseillé. 
  • Votre img est dans la propriété de réponse data.

Après ces considérations, vous pouvez essayer quelque chose comme ceci.

$http.get(url, {responseType: "arraybuffer"} ).then(function(response) { 
$scope.image= response.data; });
2
Bellu