How to display image or PDF from byte stream?

@arsyad wrote:

I am using Ionic 2 and working with a REST API that sends image and file attachments as byte stream. The output shown in the console tab is something like this (only an extract):

�PNG


IHDR X�v�psRGB���gAMA���a��IDATx^�xVW��ߏ�3g\jSwww�u

How do I convert the above to a base64 image data for display and PDF file respectively? I've been looking around some examples but cannot get it to work. Is a byte stream same as byte arrays?

I have tried a few methods:

Sample codes:

   getImageAttachment(id):Observable<any> {

    let url: string = 'API_ENDPOINT';

    return this.http.post(url)
    .map((res: Response) => { return res.text();})
    .catch((error: any) => {console.log(error);
}


testRun() => {
    getImageAttachment('test').subscribe(

        result => {

          var blob = new Blob([result], {
            type: 'image/png'
          });

          var reader = new FileReader();
          reader.readAsDataURL(blob);
          reader.onloadend = () => {
            let base64data = reader.result;
            console.log(base64data);
          }
        },

        err => {
            // display error
        }

    );
}

The base64data shows something like:

data:image/png;base64,77+9UE5HDQoaCgAAAA1JSERSAAADIAAAAlgIBgAAAO+/vXbvv71wAAAAAXNSR0IA77+977+9HO+/vQAAAARnQU1BAADvv73vv70L77+9YQUAAO+/ve+/vUlEQVR4Xu+/vQV4Vlfvv73vv73fj++/vTNnXGpTd3d377+9GnXvv73vv73vv73vv70777+977+977+977+9Bg8ECO+/vUBCQgxi77+977+9BALvv71d77+9Mu+/ve+/vTPvv71/77+977+9We+/vduQ0rTvv73OtDPvv73vv717PV1b77+9Xlvvv73vv73vv73vv71dYn7vv73vv73vv70nP++/ve+/

The converted data doesn't look right and I think something must be wrong. I am doing my tests via the browser.

Also, I need to be able to upload image data opposite way too. From photo gallery and upload as byte stream. Do I need to do a conversion somewhere? Or a plugin is required?

Posts: 1

Participants: 1

Read full topic