Lossy compression module for AngularJS applications. It takes image File
s or Blob
s and compresses them to Blob
s. 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);