How to store images in a database as binary instead of base64

Ionic Framework ionic-v3
1

Tl:DR: i keep images as base64 strings in the database but I wanna start saving them as binary because i’ve heard it occupies less space. I don’t know where to get started in converting the image to binary and the binary to image.

Hey I have an app where I use camera plugin and allow the users to browse through their gallery and choose an image to use as their profile’s avatar, that image when chosen is returned as a base64 string and saved on the database in the user’s table. Later the app can get his database row and keep it as an object locally, which brings the image as a property and then I simply make an img take the base64 string and it displays the image just like that.

PS: im using mysql

this is some data from my test app so its okay to show it

image
image.png615×603 28 KB

Ricardo’s photo for example in my gallery is 17KB, I checked, but in base64 string to be stored in the database its 137KB, insane.

image
image.png1403×453 105 KB

Thing is, I read a post on stackoverflow where an user said how base64 strings are 33% heavier than saving right away the binary of the image, so I’m now wondering, how can I achieve this? I’ve googled around but didn’t figure anything out.

Code I use to get the image and then update the image locally and also update the database with that image

  async getPhoto(sourceType:number) {
    const options: CameraOptions = {
      quality: 100,
      targetHeight: 300,
      destinationType: this.camera.DestinationType.DATA_URL,
      encodingType: this.camera.EncodingType.JPEG,
      mediaType: this.camera.MediaType.PICTURE,
      correctOrientation: true,
      sourceType: sourceType,
      saveToPhotoAlbum: false,
      allowEdit: true
    }

    this.camera.getPicture(options).then((imageData) => {
      let base64Image = 'data:image/jpeg;base64,' + imageData;
      // set the image locally but also update the database
      this.authenticationService.utilizador.avatar = base64Image;
      this.utilizadorService.update(this.authenticationService.utilizador);
    }, (err) => {
      // Handle error
    });
  }

This is me using the image

        <ion-avatar class="custom-avatar">
            <img src="{{this.authenticationService.utilizador.avatar}}" alt="" srcset="">
        </ion-avatar>
2

So storage for images is on server or on local device?

3

The storage for everything is in a server

4

Then while storing image in database, make the datatype of the table column as blob.

1 Like
5

I can alter my cameraoptions to request FILE URI instead of DATA URL, which from what I know would return a blob, which I’d put in the server, but how would I go the other way? When I get the image from the server can I show it on the img right away or do I really need to convert it to base64 to show it?

6

Send base64 data from server to your ionic app. So your storage is efficient. It’s just the network call when it gets encoded.

7

Just to make sure I understood, I’ll do the encoding on the server’s side and then return the data already as a base64 to ionic app?

8

Yes, so when a request is made, you fetch the blob data from your database and then convert it to base64 on your server and send the base64 to client(ionic app).

9

Alright I’ll look into how to do that, but in any case if that doesn’t work I’ll just transform the blob to base64 locally, thanks

1 Like