Lossy compression module for AngularJS applications. It takes image Files or Blobs and compresses them to Blobs. It also fixes image orientation according to image's EXIF metadata.
Via Bower:
$ bower install --save angular-ahdin
Via npm:
$ npm install --save angular-ahdin
After installing the package make sure that the module ahdin is defined as your app's dependency.
<script src="bower_components/blob-util/dist/blob-util.min.js"></script>
<script src="bower_components/blueimp-load-image/dist/load-image.all.min.js"></script>
<script src="bower_components/angular-ahdin/dist/angular-ahdin.js"></script>
<script>
angular.module('yourAwesomeApp', ['ahdin']);
</script>In order to to compress images, inject Ahdin to your module and call compress(). Function returns a promise that will be resolved with compressed image Blob.
angular
.module('yourAwesomeApp')
.factory('SomeFactory', function(Ahdin) {
function compressFile(file) {
Ahdin.compress({
sourceFile: file,
maxWidth: 1000,
outputFormat: 'png'
}).then(function(compressedBlob) {
doSomething(compressedBlob);
});
}
});###compress() parameter object
Parameter object that is passed to function compress() can have the following properties.
var parameterObj = {
// jpeg or png file that is instance of File or Blob
sourceFile: file, // required
// Maximum width of compressed photo in pixels
maxWidth: 1000, // optional, defaults to original image width
// Maximum height of compressed photo in pixels
maxHeight: 1000, // optional, defaults to original image height
// String defining compressed file mime type. Accepted values: 'jpeg' and 'png'
outputFormat: 'png' // optional, default value 'jpeg'
// Image quality when desired outputFormat is 'jpeg' or undefined. Take values
// over 0 and less or equal to 1. If outputFormat is 'png' this has no effect.
quality: 0.9 // optional, defaults to 0.8
};
var compressionPromise = Ahdin.compress(parameterObj);