AngularJs - Reducing Image Size while saving in database

Question

In my Angular application, I have browse and upload image functionality. Sample images provided by Windows7 (Chrysanthemum.jpg, Desert.jpg etc) having sizes greater than 500KB. I need to store image with maximum size as 170KB (Client Requirement). So how to reduce the size of images while uploading to database without affecting too much image quality) Also I don't want validation to restrict user selecting images with size greater that 170KB. I am converting image to Base64 and store as Image datatype of SQL Server.

My HTML code :

<input id="BrowseFile" type="file" ngf-select ng-model="vm.picFile" name="file" ngf-change="vm.uploadPic(vm.picFile)" accept="image/*" required >

My Controller code :

 this.uploadPic = function (picFile) {
        if (picFile == null)
            console.log("Please select image");
        else {                
                vm.fileName = picFile.name;

                picFile.upload = Upload.base64DataUrl(picFile).then(function (imgBase64) {                         
                    vm.image = imgBase64;   // Storing Uploaded photo string for storing in database.                            
                });
            }
 }

Any suggestion will be highly appreciated.

Note : I used ng-file-upload directive for Image Browsing & uploading functionality.

UPDATE 1:

I got Angular Image Compress directive on this GitHub link https://github.com/oukan/angular-image-compress now working on this with my existing code to compress image.

Answer 1

angular-image-compress.js provides the great way for accomplishing this task.

I have successfully implemented image compressing functionality using this directive. Please refer https://github.com/oukan/angular-image-compress as the starting point.