¿Cómo analizar en base64 la image binaria de la respuesta?

Quiero analizar la image solicitada desde mi API REST en la cadena base64.

enter image description here

En primer lugar … pensé, sería fácil, simplemente usar la function window.btoa() para este objective.

Cuando bash hacerlo en esa parte de mi aplicación:

 .done( function( response, position ) { var texture = new Image(); texture.src = "data:image/png;base64," + window.btoa( response ); 

Tengo el siguiente error: Uncaught InvalidCharacterError: no se pudo ejecutar 'btoa' en 'Window': la cadena que se va a codificar contiene caracteres fuera del range Latin1.

Cuando leo aquí: javascript atob returning 'La cadena contiene un carácter no válido'

El problema ocurre debido a newlines in the response y es por eso que window.btoa() falló. Cualquier formatting de image binary, por supuesto, tendrá nuevas líneas … Pero a partir del enlace de arriba la sugerencia fue eliminar / replace esos caracteres – es una mala sugerencia para mí, porque si para eliminar / replace algunos caracteres de la image binaria simplemente será corrompido

Por supuesto, las posibles alternativas se relacionan con el layout de API: – para agregar alguna function, que devuelve la representación de base64 – para agregar alguna function, que devuelve url a la image

Si no lo reparo, devolveré la representación de base64 del server, pero no me gusta de esa manera.

Existe alguna forma de resolver mi problema con la manipulación de la image binaria de la respuesta, como se muestra arriba en la parte de la captura de pantalla, ¿no es así?

Creo que parte del problema que está afectando es que jQuery.ajax no es compatible nativamente con los types de blob / arraybuffer XHR2 que pueden manejar datos binarys (ver Leyendo files binarys usando jQuery.ajax ).

Si usa un object XHR nativo con xhr.responseType = 'arraybuffer' , luego lea la matriz de respuestas y xhr.responseType = 'arraybuffer' a Base64, obtendrá lo que desea.

Aquí hay una solución que funciona para mí:

 // http://www.henryalgus.com/reading-binary-files-using-jquery-ajax/ function fetchBlob(uri, callback) { var xhr = new XMLHttpRequest(); xhr.open('GET', uri, true); xhr.responseType = 'arraybuffer'; xhr.onload = function(e) { if (this.status == 200) { var blob = this.response; if (callback) { callback(blob); } } }; xhr.send(); }; fetchBlob('http://img.javascriptes.com/javascript/uUGeiSFb.jpg', function(blob) { // Array buffer to Base64: var str = btoa(String.fromCharCode.apply(null, new Uint8Array(blob))); console.log(str); // Or: '<img src="data:image/jpeg;base64,' + str + '">' }); 

en lugar de recorrer el blob con _arrayBufferToBase64 (), use apply () para hacer la conversión, es 30 veces más rápido en mi browser y es más conciso

 // http://www.henryalgus.com/reading-binary-files-using-jquery-ajax/ function fetchBlob(uri, callback) { var xhr = new XMLHttpRequest(); xhr.open('GET', uri, true); xhr.responseType = 'arraybuffer'; xhr.onload = function(e) { if (this.status == 200) { var blob = this.response; if (callback) { callback(blob); } } }; xhr.send(); }; fetchBlob('http://img.javascriptes.com/javascript/uUGeiSFb.jpg', function(blob) { var str = String.fromCharCode.apply(null, new Uint8Array(blob)); console.log(str); // the base64 data: image is then // '<img src="data:image/jpeg;base64,' + btoa(str) + '" />' }); 

Supongo que usar escape en la cadena antes de pasarla a la function, sin la llamada API no puedo probarme.

testing

 encodeURI("testñ$☺PNW¢=") 

devoluciones

 "test%C3%B1$%E2%98%BAPNW%C2%A2=" 

Simplemente se escapa de todos los personajes, debería escaping a todos los personajes ilegales en la cadena

testing

 encodeURI("¶!┼Æê‼_ðÄÄ┘Ì+\+,o▬MBc§yþó÷ö") 

devoluciones

 "%C2%B6!%E2%94%BC%C3%86%C3%AA%E2%80%BC_%C3%B0%C3%84%C3%84%E2%94%98%C3%8C++,o%E2%96%ACMBc%C2%A7y%C3%BE%C3%B3%C3%B7%C3%B6" 

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/encodeURI

El problema al que se enfrenta es que la respuesta se considera una cadena Unicode. Vea la sección sobre Cadenas Unicode aquí: window.btoa

Varias soluciones se ofrecen en esta publicación

Los datos de la base 64 de image me funcionaron como

<img src="data:image/png;base64,' + responce + '" />