Saltar al contenido

Cómo devolver la imagen de $ http.get en AngularJS

Solución:

Ninguno de los métodos parece estar completo, esta es una solución completa:

  $http({
    method: 'GET',
    url: imageUrl,
    responseType: 'arraybuffer'
  }).then(function(response) {
    console.log(response);
    var str = _arrayBufferToBase64(response.data);
    console.log(str);
    // str is base64 encoded.
  }, function(response) {
    console.error('error in getting static img.');
  });


  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);
  }

Entonces puedo usarlo directamente:

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

La función para convertir arraybuffer dentro base64 se toma directamente de ArrayBuffer a una cadena codificada en base64

Por si alguien lo necesita.

En mi caso, tuve que enviar la solicitud a través de angular’s $http servicio, debido a varios transformadores y otras cosas elegantes que hacemos con él.

Entonces, según la guía de Mozilla mencionada anteriormente, se me ocurrió la siguiente solución:

let getImageDataURL = (url, imageType="image/jpeg") => {
  return $http.get(url, {responseType: 'arraybuffer'}).then((res) => {
    let blob = new Blob([res.data], {type: imageType});
    return (window.URL || window.webkitURL).createObjectURL(blob);
  });
};

La idea básica es establecer el responseType propiedad de la solicitud XHR subyacente y convierte el contenido binario en URL de datos.

La imagen que regresa está en codificación binaria, en lugar de Base64.

Comprensiblemente, <img> Las etiquetas no admiten el origen de atributos binarios a través, por lo que tendrá que buscar otra solución.

Puede intentar convertir la codificación binaria a Base64 en el lado del cliente usando TypedArrays junto con el btoa función. Entonces podrías usar

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

Esta guía de Mozilla cubre cómo hacer una solicitud XHR para una imagen y leerla directamente en un UInt8Array. Debería ser un buen punto de partida.

Está escrito para Javascript antiguo, pero traducirlo a Angular debería ser un buen ejercicio si recién está aprendiendo las cuerdas.

¡Haz clic para puntuar esta entrada!
(Votos: 0 Promedio: 0)


Tags : /

Utiliza Nuestro Buscador

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *