javascript - bootstrap - Obtener datos de imagen o byte con http

input list html

Question

Para una aplicación web, necesito obtener mis imágenes con una solicitud ajax porque tenemos firma + autenticación en nuestra API, por lo que no podemos obtener imágenes usando un simple <img src="myapi/example/145"/>

Ya que estamos usando angular2, obviamente buscamos blob o algo así, pero como se indica en el archivo static_response.d.ts :

/**
 * Not yet implemented
 */
blob(): any;

Entonces, no puedo hacerlo por ahora, tengo que esperar a que se implemente esta característica.

Pero el problema es que no puedo esperar, así que necesito un hotfix o un pequeño truco para poder obtener datos de imagen de la respuesta y podré eliminar mi truco y configurar la llamada al método blob() para que sea bueno cuando sea ser implementado.

Intenté esto:

export class AppComponent {
    constructor(private api:ApiService, private logger:Logger){}
    title = ''Tests api'';
    src=''http://placekitten.com/500/200''; //this is src attribute of my test image
    onClick(){ //Called when I click on "test" button
        this.api.test().then(res => {
            console.log(res._body);
            var blob = new Blob([new Uint8Array(res._body)],{
                type: res.headers.get("Content-Type")
            });
            var urlCreator = window.URL;
            this.src = urlCreator.createObjectURL(blob);
        });
    }
}

con el método ApiService.test() :

test():Promise<any> {
        return this.http.get(this._baseUrl + "myapi/example/145", this.getOptions())
//getOptions() is just creating three custom headers for     
//authentication and CSRF protection using signature
            .toPromise()
            .then(res => {
                    this.logger.debug(res);
                if(res.headers.get("Content-Type").startsWith("image/")){
                    return res;
                }
                return res.json();
            })
            .catch(res => {
                this.logger.error(res);
                return res.json();
            } );
    }

Pero no obtengo ninguna imagen de ella y el registro de los datos de respuesta muestra una cadena grande que es información de imagen.

¿Tienes un truco para lograr esto?

Answer 1

Creo que te perdiste para establecer el tipo de responseType en tu solicitud. En este momento es un poco complicado porque no es compatible.

La solución alternativa sería anular la clase BrowserXhr para establecer responseType en el objeto xhr sí ...

Usted podría extender el BrowserXhr :

@Injectable()
export class CustomBrowserXhr extends BrowserXhr {
  constructor() {}
  build(): any {
    let xhr = super.build();
    xhr.responseType = ''arraybuffer'';
    return <any>(xhr);
  }
}

y anule el proveedor de BrowserXhr con la clase extendida:

bootstrap(AppComponent, [
  HTTP_PROVIDERS,
  provide(BrowserXhr, { useClass: CustomBrowserXhr })
]);

El problema es que no anula todas las solicitudes. En el nivel de arranque, anulará todo. Por lo tanto, podría proporcionarlo en un subinyector dentro del atributo de providers del componente afectado ...

Aquí hay un plunkr de trabajo: https://plnkr.co/edit/tC8xD16zwZ1UoEojebkm?p=preview .

Answer 2

Este JSFiddle podría ayudarlo: https://jsfiddle.net/virginieLGB/yy7Zs/936/

El método es, como usted quería, crear un Blob desde la URL provista

// Image returned should be an ArrayBuffer.
var xhr = new XMLHttpRequest();

xhr.open( "GET", "https://placekitten.com/500/200", true );

// Ask for the result as an ArrayBuffer.
xhr.responseType = "arraybuffer";

xhr.onload = function( e ) {
    // Obtain a blob: URL for the image data.
    var arrayBufferView = new Uint8Array( this.response );
    var blob = new Blob( [ arrayBufferView ], { type: "image/jpeg" } );
    var urlCreator = window.URL || window.webkitURL;
    var imageUrl = urlCreator.createObjectURL( blob );
    var img = document.querySelector( "#photo" );
    img.src = imageUrl;
};

xhr.send();

Answer 3

Usar el nuevo Angular HttpClient es realmente fácil de lograr. Saliendo del enfoque de tschuege, sería:

return this._http.get(''/api/images/'' + _id, {responseType: ''blob''}).map(blob => {
  var urlCreator = window.URL;
  return this._sanitizer.bypassSecurityTrustUrl(urlCreator.createObjectURL(blob));
})

La clave es establecer el responseType como ''blob'' para que no intente analizarlo como JSON

Answer 4

Ya no es necesario extender BrowserXhr . (Probado con 2.2.1 angular) RequestOptionsArgs ahora tiene una propiedad responseType: ResponseContentType que se puede establecer en ResponseContentType.Blob

Utilizando DomSanitizer

import {DomSanitizer} from ''@angular/platform-browser'';

Este ejemplo también crea una url saneada que puede vincularse a la propiedad src de un <img>

this.http.get(url,  {
                        headers: {''Content-Type'': ''image/jpg''},
                        responseType: ResponseContentType.Blob
                    })
        .map(res => {
            return new Blob([res._body], {
                type: res.headers.get("Content-Type")
            });
        })
        .map(blob => {
            var urlCreator = window.URL;
            return  this.sanitizer.bypassSecurityTrustUrl(urlCreator.createObjectURL(blob));
        })