從響應中提取圖像數據：Angular2

Question

響應具有圖像數據，但我無法從響應中提取它。

客戶端代碼 -

download() { 
    this._http.get('http://localhost:9000/download/' + this._fileid) 
    .subscribe(
    data => { 
     this.image = data; 
    }, 
    err => console.log('Error is..:' + err) 
    ); 
} 

服務器代碼 -

app.get('/download/:fileid', function(req, res) { 
    var id = req.params.fileid; 
    res.set('Content-Type', 'image/jpeg'); 
    gfs.createReadStream({_id: id}).pipe(res); 
}); 

[編輯] - 我已經適應我的代碼使用CustomXhr但卻我得到沒有數據是空BLOB。

CUSTOM XHR代碼 -

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

自舉代碼 - 導出函數main（initialHmrState？：任何）：無極{

return bootstrap(App, [ 
    ...ENV_PROVIDERS, 
    ...PROVIDERS, 
    ...DIRECTIVES, 
    ...PIPES, 
    ...APP_PROVIDERS, 
    provide(BrowserXhr, { useClass: CustomBrowserXhr }) 
    ]) 
    .catch(err => console.error(err)); 

HTTP請求 -

download() { 
    this._http.get('http://localhost:9000/download/' + this._fileid) 
     .toPromise() 
     .then(res => { 
     if (res.headers.get("Content-Type").startsWith("image/")) { 
      var blob = new Blob([new Uint8Array(res._body)], { 
       type: res.headers.get("Content-Type") 
      }); 
      var urlCreator = window.URL; 
      var url = urlCreator.createObjectURL(blob); 
      console.log(url); 
      this.image = url; 
     } 
     }) 
    } 

Answer 1

你什麼正在尋找的是arrayBuffer()。您的代碼將爲：

download() { 
    this._http.get('http://localhost:9000/download/' + this._fileid) 
    .subscribe(
    data => { 
     this.image = data.arrayBuffer(); 
    }, 
    err => console.log('Error is..:' + err) 
    ); 
} 

但是，不幸的是，arrayBuffer()自beta.13以來尚未實施。

你也可以使用XMLHttpRequest，Here is a plunker

getImage(url:string){ 
return Observable.create(observer=>{ 
    let req = new XMLHttpRequest(); 
    req.open('get',url); 
    req.responseType = "arraybuffer"; 
    req.onreadystatechange = function() { 
    if (req.readyState == 4 && req.status == 200) { 
     observer.next(req.response); 
     observer.complete(); 
    } 
    }; 
    req.send(); 
}); 
} 

Answer 2

事實上，因爲你不能設置與Angular2請求的responseType財產是不是現在這麼簡單（沒有此掛起PR ）。

作爲一種解決方法，則需要擴展BrowserXhr類Angular2的如下所述來設置responseType到blob底層XHR對象上：

import {Injectable} from 'angular2/core'; 
import {BrowserXhr} from 'angular2/http'; 

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

然後，你需要包裝響應的負載成Blog object：

downloadFile() { 
    this.http.get(
    this.http.get(
     'https://mapapi.apispark.net/v1/images/sparky_right.png') 
    .subscribe(
     (response) => { 
     var mediaType = 'image/png'; 
     var blob = new Blob([response._body], {type: mediaType}); 
     (...) 
     }); 
} 

看到這個plunkr：看到這個plunkr：http://plnkr.co/edit/2ZodNBmv8OVj3LZSrozG?p=preview。

看到這些問題的更多細節：

• Angular 2 download PDF from API and Display it in View