Получить изображения или байтовые данные с помощью http

Question

Получить изображения или байтовые данные с помощью http

Для веб-приложения мне нужно получить мои изображения с помощью запроса ajax, потому что у нас есть подпись + аутентификация в нашем API, поэтому мы не можем получать изображения с помощью простого <img src="myapi/example/145"/>

Поскольку мы используем angular2, мы, очевидно, искали blob или что-то в этом роде, но, как указано в static_response.d.tsфайле:

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

Так что хорошо, я не могу это сделать пока, мне нужно дождаться, когда эта функция будет реализована.

Но проблема в том, что я не могу дождаться, поэтому мне нужно исправление или небольшой взлом, чтобы иметь возможность получать данные изображения из ответа, и я смогу удалить свой хак и установить, что blob()вызов метода будет хорошим, когда он будет реализован.

Я попробовал это:

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

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

Но я не получаю от него никакого изображения, и запись данных ответа показывает большую строку, которая представляет собой данные изображения.

У вас есть взломать это?

javascript,angular,angular2-http,

15

Ответов: 4

JavaScript, угловой, angular2-клиент,

Похожие вопросы

score 25 · Accepted Answer

голосование 25 голосов принято

Больше не нужно расширять BrowserXhr. (Протестировано с угловым 2.2.1) RequestOptionsArgs теперь имеет свойство, ResponseContentType.Blobкоторое может быть установлено наimport {DomSanitizer} from '@angular/platform-browser';

Использование DomSanitizer

src

В этом примере также создается дезинфицированный URL-адрес, который может быть привязан к <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)); })

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

score 7 · Accepted Answer

голосование 7 голосов

Использование нового Углового HttpClient действительно легко достичь этого. Исходя из подхода tchchuege, это будет:

responseType

Ключ должен установить BrowserXhr как «blob», чтобы он не пытался анализировать его как JSON

score 4 · Accepted Answer

голосование 4 голос

Я думаю, что вы пропустили установку responseTypeпо вашему запросу. Сейчас это немного сложно, потому что оно не поддерживается.

Обходным решением было бы переопределить responseTypeкласс, чтобы установить его responseTypeна самом xhrобъекте ...

Вы можете расширить BrowserXhr:

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

и переопределить BrowserXhrпровайдера с расширенным классом:

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

Проблема заключается в том, что вы не переопределяете для всех запросов. На уровне начальной загрузки он будет отменять все. Таким образом, вы можете предоставить его в дополнительном инжекторе в providersатрибуте воздействующего компонента ...

Вот рабочий планк: https://plnkr.co/edit/tC8xD16zwZ1UoEojebkm?p=preview .

score -1 · Accepted Answer

-1

Этот JSFiddle может вам помочь: https://jsfiddle.net/virginieLGB/yy7Zs/936/

Этот метод, как вы хотели, создавал Blob из URL-адреса, предоставленного

// 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();