Feature Request

[bnbon]

Hello,

I would love to see an example (or support for) with compression of an image as part of the encoding process, so that might be the ability to set a maximum height/width for an image, or a ratio to reduce the "physical" dimensions by.

I feel this is going to be a common use case, so just wanted to pitch the idea!

Thanks for the library.

[adonespitogo]

I think that is quite out of scope of this project. There are a lot of image processing libraries out there already. What we can do I think is to make the base64 data of an image compatible with those image processing libraries.

[adonespitogo]

https://github.com/sloops77/AngularImageProcessor

app.controller('mycontroller', function ($scope, imageProcessor) {
  $scope.onloadHandler = function (e, reader, file) {
    var options = {
      resizeMaxHeight: 150,
      resizeMaxWidth: 150,
      resizeQuality: 0.7
    };

    var url = URL.createObjectURL(file)

    imageProcessor.run(url, options, function(processedImage) {
      console.log(processedImage);
    });

  };
});

<input type="file" accept="image/*" ng-model="file" onload="onloadHandler">

[bnbon]

That would be totally awesone, thats exactly what I have been looking for!

[ohpyupi]

I tried to use imageProcessor using custom parser, but the documentation is very unfriendly and doesn't make sense at all. Can you update the document and post 'truly-working' example?

EDIT

Finally I got it work. But I still doubt if imageProcessor is still working or not. Thus, instead of imageProcessor, I decided to go Jimp.
Below is my custom parser that really works.

$scope.resizeImage = function (file, base64Object) {
  // file is a File instance that contains image data
  // base64Object is an object that contains compiled base64 out of 'file'
  var deferred = $q.defer();
  var url = URL.createObjectURL(file);
  Jimp(function (item) {
    item
    .resize(1280, Jimp.AUTO)
    .quality(50)
    .getBase64(file.type, function (err, newBase64) {
       if (err) {throw err;}
       base64Object.filetype = file.type;
       base64Object.base64 = newBase64;
       deferred.resolve(base64Object);
    });// end of getBase64()
  })
  .catch(function (err) {
     console.log(err);
   })
   return deferred.promise;
};

One thing we should note is that the base64 format in Jimp and 'angular-base64-upload' are slightly different. Jimp's base contains filetype info in base 64. Thus, it starts like this, "data:image/jpeg;base64, REALBASE64 COMES HERE". However, angular-base-64-upload's base64 doesn't contain 'data:image/jpeg;base64 ' part. If you take care of this part in back-end, it will smoothly works. Hope this will help anybody who's struggling with image processing custom parser.