ben bizim API hakkında imza + kimlik doğrulaması çünkü bir ajax isteği ile benim görüntüleri almak gerekir bir web uygulaması için http

Question

ile görüntü veya bayt veri alın, bu yüzden basit bir <img src="myapi/example/145"/>

yana kullanarak görüntüleri alamayan biz angular2 kullanıyoruz, biz açıkça damla ya da böyle bir şey aradı, ancak static_response.d.ts dosyasında belirtildiği gibi:

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

Yani tamam, şimdilik bunu yapamaz, ben thie özellik için beklemek zorunda uygulanacak.

Ama sorun bekleyemem, bu yüzden görüntü verisini yanıt almak için bir düzeltmeye veya küçük bir hack'e ihtiyacım var ve hack'imi kaldırmam ve blob() yöntem çağrısını uygulanacak. ApiService.test() yöntemle

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

:

Bu çalıştı

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

Fakat, ondan herhangi bir resmi almak ve yanıt verilerini günlüğü görüntü veridir büyük bir dize gösterir yoktur.

Bunu başarmak için bir hackiniz var mı?

Answer 1

Artık BrowserXhr ürününü uzatmak gerekli değil. (Açısal 2.2 ile test edilmiştir.1) RequestOptionsArgs şimdi DomSanitizer

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

kullanma ResponseContentType.Blob

ayarlanabilir bir özellik responseType: ResponseContentType sahiptir

Bu örnek bir <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)); 
     }) 

ait src özelliğine bağlı edilebilen bir ayıklanmış url yaratır yeni Açısal httpclient kullanma

Answer 2

Bu JSFiddle size yardımcı olabilecek

: https://jsfiddle.net/virginieLGB/yy7Zs/936/

istediğin gibi, URL'den bir Blob'u oluşturarak

// 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

İsteğiniz üzerine responseType ayarlamak için cevapsız düşünüyorum sağlanan yöntem . Şu anda bu biraz zor, çünkü desteklenmiyor.

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

ve genişletilmiş ile BrowserXhr sağlayıcı geçersiz: Sen BrowserXhr uzanabilir

geçici çözüm xhr nesnenin kendisinde responseType ayarlamak için BrowserXhr sınıfı geçersiz kılmak olacaktır ... class:

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

Sorun burada değilsiniz. Tüm istekler için geçersiz kıl. Önyükleme seviyesinde, her şeyi geçersiz kılacaktır. Bu nedenle, etkilenen bileşenin providers özniteliğinde bir alt enjektörde sağlayabilirsiniz ...

İşte bir çalışma plunkr: https://plnkr.co/edit/tC8xD16zwZ1UoEojebkm?p=preview.

Answer 4

bunu başarmak için gerçekten çok kolaydır. tschuege yaklaşımı gidiyor, öyle olurdu: Bu JSON olarak ayrıştırmak teşebbüs etmeyecek şekilde