将可观察的链链接到一个订阅

Question

I've got a model class called 'Item' which needs two seperate images to be loaded from the backend (a sprite-texture and a shadow-texture to be precise). I achieved a parallel loading and eventual join of the textures into my Item so that I could simply subscribe to it in another place.

Now, I've had this working when I used Base64 to transfer the files to my Angular2 Application. But now I want to work with the plain blobs. Although this is not yet supported by Angular2, it is totally possible to read the private _body property of the response. The thing is that my model class should retrieve the images as HTMLImageElements with the data parsed as a Base64 data url. To generate this data url from my blobs I need to use FileReader.readAsDataUrl() which works based on a callback. I think I've figured out how to wrap this callback into an Observable (correct me if this approach is wrong, as I can't confirm it at this point).

So, now I simply can not figure out how to correctly chain my calls to be able to subscribe to a resulting Observable which then produce my Item, like this ItemService.getItem(1).subscribe(item => ...)

The current setup gives me a weird error stating that the subscribe-method is not defined on the resulting Observable. Im pretty new to RxJS and would be very glad if someone could show me how to set this up properly :)

/* implementation in ItemService */

getItem(id:number):Observable<Item> {
    return Observable.forkJoin( // join both texture fetches
        this.http.get('/api/items/' + id + '/sprite'),  // fetch sprite texture
        this.http.get('/api/items/' + id + '/shadow'),  // fetch shadow texture
        (spriteResponse, shadowResponse) => {
            // transform responses into proper blobs
            const spriteBlob = new Blob([spriteResponse._body], {type: 'image/png'})
            const shadowBlob = new Blob([shadowResponse._body], {type: 'image/png'})
            return [spriteBlob, shadowBlob]
        })
        .flatMap(result => Observable.forkJoin( // chain with joined image generation (pretty sure this is wrong somehow)
            ItemService.generateImage(result[0]), // parse spriteBlob to image
            ItemService.generateImage(result[1]), // parse shadowBlob to image
            (spriteImage, shadowImage) => {
                // assemble model from images
                const item = new Item()
                item.setSprite(spriteImage)
                item.setShadow(shadowImage)
                return item
            })
        )
}

static generateImage(data:Blob):Observable<HTMLImageElement> {
    const img = new Image() // create new HTML Image
    const reader = new FileReader() // init file reader
    reader.readAsDataURL(data)  // transform blob to base64 data url

    // create observable from callback (is this correct?)
    return Observable.bindCallback(reader.onloadend, () => {
        img.src = reader.result
        return img
    })
}

Answer 1

The problem is two-fold. First is that bindCallback returns a function which returns an Observable when invoked it does not return an Observable . The idea of binding a callback is that you are converting a function that normally reports its async result through a callback into an Observable .

In this case you are actually waiting on an event to be fired ( loadend ), so you likely want to use fromEvent instead.

static generateImage(data:Blob):Observable<HTMLImageElement> {
    const reader = new FileReader() // init file reader
    reader.readAsDataURL(data)  // transform blob to base64 data url

    // create observable from callback (is this correct?)
    return Observable.fromEvent(reader, 'load', (e) => {
       var img = new Image();
       img.src = reader.result;
       return img;
    }).first();
}

Now this isn't terribly robust but should get the job done. If you want to see a more complete example there is a fromReader method that was written for RxJS4 that you could commandeer for your purposes (the version for RxJ5 hasn't been implemented yet).