Comment puis-je convertir l'image binaire de l'appel API vers l'URI de données en Javascript?

Après avoir effectué des tests, voici ma réponse:

Pour afficher simplement l'image à l'aide de la <img> , vous devez d'abord coder le résultat binaire avec Base64. Vous pouvez le faire de deux façons différentes:

1. Utilisation de Javascript: utilisez une fonction codeur Base64, comme celle-ci . Après avoir codé les données binaires de résultat, vous pouvez afficher l'image à l'aide de la <img> comme suit: <img src="data:image/*;base64,[BASE64 ENCODED BINARY]" /> . Vous devez remplacer [BASE64 ENCODED BINARY] par le binaire encodé réel de l'image. Je suppose que vous savez déjà comment modifier les attributs d'éléments HTML via Javascript, il est assez facile de placer le binôme codé dans l'attribut src de la <img> .

2. Utilisation de PHP (ma préférence personnelle) : Une fois que vous soumettez une demande GET à l'API, elle vous renverra le binaire. Il suffit d'utiliser la fonction PHP base64_encode() .

   <img src="data:image/*;base64,<?php echo base64_encode($result); ?>" />

Où, la variable de $result est ce que vous obtenez de l'appel de l'API. Vous pouvez utiliser la bibliothèque PHP cURL .

J'espère que ça aide.

Ok j'ai trouvé la solution …

Tout d'abord, la requête doit remplacer le type de retouche défini par x

 xhr.overrideMimeType('text\/plain; charset=x-user-defined'); 

Après cela, les données sont intactes par le navigateur.

Utilisez l'encodeur Base64 suivant

 Base64 = { // private property _keyStr: "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=", encodeBinary: function (input) { var output = ""; var bytebuffer; var encodedCharIndexes = new Array(4); var inx = 0; var paddingBytes = 0; while (inx < input.length) { // Fill byte buffer array bytebuffer = new Array(3); for (jnx = 0; jnx < bytebuffer.length; jnx++) if (inx < input.length) bytebuffer[jnx] = input.charCodeAt(inx++) & 0xff; // throw away high-order byte, as documented at: https://developer.mozilla.org/En/Using_XMLHttpRequest#Handling_binary_data else bytebuffer[jnx] = 0; // Get each encoded character, 6 bits at a time // index 1: first 6 bits encodedCharIndexes[0] = bytebuffer[0] >> 2; // index 2: second 6 bits (2 least significant bits from input byte 1 + 4 most significant bits from byte 2) encodedCharIndexes[1] = ((bytebuffer[0] & 0x3) << 4) | (bytebuffer[1] >> 4); // index 3: third 6 bits (4 least significant bits from input byte 2 + 2 most significant bits from byte 3) encodedCharIndexes[2] = ((bytebuffer[1] & 0x0f) << 2) | (bytebuffer[2] >> 6); // index 3: forth 6 bits (6 least significant bits from input byte 3) encodedCharIndexes[3] = bytebuffer[2] & 0x3f; // Determine whether padding happened, and adjust accordingly paddingBytes = inx - (input.length - 1); switch (paddingBytes) { case 2: // Set last 2 characters to padding char encodedCharIndexes[3] = 64; encodedCharIndexes[2] = 64; break; case 1: // Set last character to padding char encodedCharIndexes[3] = 64; break; default: break; // No padding - proceed } // Now we will grab each appropriate character out of our keystring // based on our index array and append it to the output string for (jnx = 0; jnx < encodedCharIndexes.length; jnx++) output += this._keyStr.charAt(encodedCharIndexes[jnx]); } return output; } }; 

Il y a les choses magiques publiées par mozilla qui ne m'a pas permis d'encoder les choses correctement

 bytebuffer[jnx] = input.charCodeAt(inx++) & 0xff 

Le code final serait alors comme ça …

 oauth.authorize(function () { var method = "GET", params = {}, url = photo.href; var nxhr = new XMLHttpRequest(); nxhr.onreadystatechange = function (data) { if (nxhr.readyState == 4) { console.log("<img src='data:image/*;base64," + Base64.encodeBinary(nxhr.response) + "' />"); } }; nxhr.open(method, url, true); nxhr.setRequestHeader('GData-Version', '3.0'); nxhr.setRequestHeader('Authorization', oauth.getAuthorizationHeader(url, method, params)); nxhr.overrideMimeType('text\/plain; charset=x-user-defined'); }); 

PS Si vous mettez directement la "donnée: image / *" dans la fenêtre du navigateur, elle téléchargera le fichier et ne pourra pas l'ouvrir. Mais si vous le mettez directement dans un img src, ça marche bien!

Si vous utilisez une data: URI, je suppose que vous ne vous occupez pas des anciens navigateurs. Dans ce cas, utilisez btoa() comme btoa() dans Comment pouvez-vous coder une chaîne vers Base64 en JavaScript? , Et revenir sur l'alternative mentionnée dans la deuxième réponse . Ensuite, les data: URI est simple:

 data:image/*;base64,<the btoa output> 

Toutes les autres solutions sont obsolètes. Aucun Base64 n'est nécessaire. Vérifiez ma réponse sur la réception des données BLOB de la demande XHR .