javascript - subir - ¿Cómo analizar en la cadena base64 la imagen binaria de la respuesta?

seleccionar imagen javascript

Question

Quiero analizar la imagen solicitada de mi API REST en la cadena base64.

Primero ... pensé, sería fácil, solo usar la función window.btoa() para este objetivo.

Cuando intento hacerlo en tal 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 a codificar contiene caracteres fuera del rango Latin1.

Como leí aquí: javascript atob regresando ''La cadena contiene un carácter no válido''

El problema se produce debido a newlines in the response y es por eso que window.btoa() falló. Por supuesto, cualquier formato de imagen binario tendrá nuevas líneas ... Pero a partir del enlace anterior, la sugerencia fue eliminar / reemplazar esos caracteres. Es una mala sugerencia para mí, porque si eliminar / reemplazar algunos caracteres de la imagen binaria será simplemente corrompido

Por supuesto, las posibles alternativas se relacionan con el diseño de la API: - para agregar alguna función, que devuelve la representación de base64 - para agregar alguna función, que devuelve url a la imagen

Si no lo reparo, devolveré la representación de base64 desde el servidor, pero no me gusta tal manera.

Existe alguna forma de resolver mi problema con el manejo de la imagen binaria a partir de la respuesta, como se muestra arriba en la parte de la captura de pantalla, ¿no es así?

Answer 1

Base de datos de imagen 64 se trabaja para mí como

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

Answer 2

Creo que parte del problema que está jQuery.ajax es que jQuery.ajax not admite de forma nativa los tipos de blob / array de XHR2 que pueden manejar datos binarios (consulte Lectura de archivos binarios utilizando jQuery.ajax ).

Si usa un objeto 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(''https://i.imgur.com/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 + ''">''
});

https://jsfiddle.net/oy1pk8r3/2/

Produce salida de consola codificada en base64: /9j/4AAQSkZJRgABAQEASABIAAD/2wBDAAIBAQIBAQICAgICAgICAw.....

Answer 3

El problema que está encontrando es que la respuesta se considera una Cadena Unicode. Vea la sección sobre Cadenas Unicode aquí: window.btoa

Varias soluciones se ofrecen en este post

Answer 4

Supongo que usar escape en la cadena antes de pasarla a la función, sin la llamada a la API no puedo ponerme a prueba.

prueba

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

devoluciones

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

Simplemente escapa a todos los caracteres, debería escapar a todos los caracteres ilegales en la cadena

prueba

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

Answer 5

en lugar de recorrer el blob con _arrayBufferToBase64 (), use apply () para hacer la conversión, es 30 veces más rápido en mi navegador 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(''https://i.imgur.com/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) + ''" />'' 
});