How to convert an image to Blob

Ionic Framework ionic-v3
1

I am having a bit issue with trying to convert my image to blob

file = "assets/imgs/profile.png" 
//this is the image to be changed to a blob 

let reader = new FileReader()

reader.readAsArrayBuffer(file);
              reader.onloadend = (evt: any) => {
                let imgBlob = new Blob([evt.target.result], { type: 'image/jpeg' });
}

I am trying to upload the image to a REST API written in PHP laravel and its expecting the image in blob

2

Blob or base64 string?

3

Blob! sorry for the late answer

i am sending the image to an api written in laravel. its expecting the image in blob so as to store or save in the database.

4

OK.

Here’s a repo I’ve knocked together for you…

Will you be actually grabbing images from assets or from the camera?

Is this a PWA or native app?

1 Like
5

the asset image is like the placeholder if the user doesnt take a picture with the camera

6

Well I’ve shown you how to do it from assets so you’ll have no problem altering it for the camera

7

There is this post for converting the base64 you can produce easily from the camera function to a blob…

8

alright thanks very much, would try it out

9

just tried sending the image

 let image  = "assets/imgs/profile.png"

i sent it to the api and it worked perfectly well though

10

nice one. happy coding

11

thanks, really appreciate :grinning:

13

(Sorry for super late reply from nowhere) but I can’t find any sign of non template code in your project that is helping me at all. Can you point out what file or code snippets I should look at to figure out what you did?

14

Please how did you solve this issue @olajhidey

15

I decided to use firebase storage to store image and then saved the link generated from firebase into my db @dotman

16

Alright then…Thanks for responding

17

In 2020 you can

    var file = 'assets/assets/imgs/profile.png';
    fetch(file)
      .then (res => res.blob()) // Gets the response and returns it as a blob
      .then (blob => {
        firebase.storage().ref().child('/userProfile/' + this.currentUser.uid + '/profilePicture.png')
          .put(blob).then( savedPicture => {
            console.log('Uploaded img file!');
            // now you can save your URL for output in HTML
            this.userProfileRef.update({"profilePicture": savedPicture.downloadURL})
          }); /*
    });
1 Like