How to auto-compress Images while uploading image in angularjs

Question

Here is my HTML form:

<form name="myForm" ng-submit="">
    <input ng-model='file' type="file"/>
    <input type="submit" value='Submit'/>
</form>

I want to upload an image. Here if the file size is big(like 3 or 4 MB), I want to compress image automatically to 1MB or less than that. Any options are there to autocompress images in angularjs or javascript.

Answer 1

This Angular directive compresses jpeg or png files using angularjs on client side. Read more about it here

This module depends on angularjs, so make sure you've added angularjs dependency and then angular-image-compress.js. Something like

angular.module('myApp', ['ngImageCompress']);

This is how you can achieve what you want.

 <input id="inputImage" type="file" accept="image/*" image="image1" resize-max-height="800" resize-max-width="800" resize-quality="0.7" resize-type="image/jpg" ng-image-compress />

Directives used in above input tag are self explanatory

Answer 2

you can use image-compressor, where you can specify your desired height and width of your image.

https://www.npmjs.com/package/image-compressor