Display Blob Image from server


#1

Hello, I am using Ionic 3 and working with a REST API that sends image as byte stream.

                   byte[] contents = IOUtils.toByteArray(new FileInputStream(file));
			    HttpHeaders headers = new HttpHeaders();
	            headers.setContentType(MediaType.parseMediaType("image/png"));
	            String filename = file.getName();
	            headers.setContentDispositionFormData(filename, filename);
	            ResponseEntity<byte[]> response = new ResponseEntity<byte[]>(contents, headers, HttpStatus.OK);
	            return response;

With fiddler, the output ImageView is ok.

How do I convert the above to a base64 image data for display in my ionic app?

I have tried a few methods:

myWsService () :{ 
let obsRes: Observable<Response> = this.http.post(url, options);
return obsRes.map((res: Response) => { return res._body;}).catch(err => this.handleError(err, callMethod));
}
    myWsService().subscribe(

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

          var reader = new FileReader();
          reader.readAsDataURL(blob);
          reader.onloadend = () => {
            this.base64data = reader.result;
            console.log(this.base64data);
          }
        },
        err => {
            // display error
        }
    );
<img style="width:200px;height:200px;" [src]="base64data" />

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 or phone.

Any ideas please?

EDIT 1 :
My response is correct, with fiddler i checked the binary content. But in ionic, my blob is corrupted. I don’t have good binaries datas. Some characters are replaced by ’ '� '. At left the original file, at right the file received by ionic.

I don’t understand why.


#2

#3

No, your link is to convert a base64 in blob. I have a blob, and i want a base64.


#4

I convert the image to a base64 string on the server. I use nodejs with expressjs on server side.

app.get('/friendships/avatars/:avatar', authenticate, (req, res) => {
    let filePath = path.join(__dirname, '../private/images/avatars', req.params.avatar);
    try {
        let avatar = fs.readFileSync(filePath, 'base64');
        res.send({ avatar });
    } catch (err) {
        res.status(500).send();
    }

});

On Ionic I use this to get the base64 image

 async getUserAvatarBase64(token: string): Promise<string> {
    try {
      let headers = new Headers({ 'Content-Type': 'application/json', 'x-auth': token });
      const response = await this.http.get(`${this.server}${this.profilesAvatarsRoute}/${this.userProfile.avatar}`, { headers: headers }).toPromise();
      return `data:image/jpg;base64,${response.json().avatar}`;
    } catch (err) {
      throw new Error();
    }

}

To add data:image/jpg;base64, to the return value is important

In my case I save the return value in userprofile.avatar.

In the html page you can use it like this:

<img class="profile-view_image" [src]="userProfile?.avatar ? userProfile?.avatar : 'assets/img/avatar.png'" alt="">

So this is not an exact answer to your question, but perhaps a way to solve your problem.


#5

Yes, it’s my actual solution. In base 64 (with JSON format), it’s ok. But a request for a same file is +30% bigger in base64…


#6

Perhaps you have an idea :
I have stored images in a local pouchdb, and want to retrieve them…
my html
<img [innerHTML]="getimage('png.png')">

page function

getimage(file){
    this.pouch.getimagepouch(file).then((res)=>{
      return res;
    });
  }

database function :

async getimagepouch(img){
		
		console.log('appel getimagepouch');
		try{
			let blob = await this.localdbimages.getAttachment(img, img);
		        let url = 'src='+ URL.createObjectURL(blob);
                        return url;
		} catch (err){
			console.log(err);
		}
	}

It seems like there is an infinite loop, (recursive ?), getimage gets called again and again…

I get these url in getimagepouch :

src=blob:http://localhost:8100/57813597-d5f0-4f0b-a48a-a31ea6bf5066

After some time, I get this error :

Lazy require of app.binding did not set the binding field

Any clue??