0

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.

supergentle
  • 1,001
  • 1
  • 14
  • 33
  • 1
    When you use Base64 you're actually increasing the file size. Isn't regular HTTP compression enough for you? And... It's not so "tricky" to upload files with angular. See this answer: http://stackoverflow.com/questions/18571001/file-upload-using-angularjs – karliwson Jan 03 '17 at 21:25
  • Thanks. I also looked into that package and way to do that. However, the forms I am dealing with is not just forms with several inputs. But very big in size and with many file upload inputs. It seems like I have to separate text data and file data when using such packages, which eventually makes me difficult to scale the app and data structure. That's why I decided to go base64 even if it goes larger than bare data. – supergentle Jan 03 '17 at 21:38

1 Answers1

1

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.

supergentle
  • 1,001
  • 1
  • 14
  • 33