Base64 image compression before sending it to Cloudinary

2.1k views Asked by At

I am making a web app that supports image upload and views for users. I was using angularjs for framework, but after I figured out sending images to backend is quite tricky in single page app framework(angular), I chose to compile the image to base64 and send it to the backend.

Once the backend grab the base64 image, it will send again it to Cloudinary and the database will save the response from cloudinary, which is JSON file that stores image properties and urls.

This worked great so far, but now I want to add one more process, image compression, between any of the process above. I am quite new to this method. So I am wondering if any one who have dealt with this and get me some suggestion or recommendation.

Thanks for your time.

1

There are 1 answers

0
supergentle On BEST ANSWER

Here is what I have figured out. Hope this will help some people who is struggling with the same question.

For compiling the image to base64, I used angular-base64-upload. Also, this package gives us a chance to process files before the base64 strings added to ng-model variables.

Thus, I used Jimp for the mixture with angular-base-64-upload. It works great. 3.5Mb-sized image drops down to around 110kb, reducing quality to 50% and width to 1280px.