How to convert an image to Blob

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.onloadend = (evt: any) => {
                let imgBlob = new Blob([], { 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

Blob or base64 string?

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.


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

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

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

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

alright thanks very much, would try it out

just tried sending the image

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

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

nice one. happy coding

thanks, really appreciate :grinning:

(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?

Please how did you solve this issue @olajhidey

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

Alright then…Thanks for responding

In 2020 you can

    var file = 'assets/assets/imgs/profile.png';
      .then (res => res.blob()) // Gets the response and returns it as a blob
      .then (blob => {'/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