Siphion / meteor-clientside-image-manipulation

A clientside javascript library for manipulating images before uploading. Specifically, resizing and adjusting for image orientation.

Meteor Clientside Image Manipulation

This package was born out of the necessity to process images before uploading them to the server.

One problem is that browsers do not render images with the correct orientation based on EXIF metadata. Another problem this package solves is reducing the size of images before uploading.

All of the code in this package comes from this tutorial.

Usage

meteor add ccorcos:clientside-image-manipulation

Then if you want to use it with CollectionFS, all you have to do is pipe things through the processImage function:

Coffeescript:

Template.upload.events
  'change #image-upload': (e,t) ->
    file = e.target.files[0]
    if not file? then return

    # processImage(file or blob, maxWidth, maxHeight, callback(dataURI))
    data = processImage file, 300, 300, (data) ->
      img = new FS.File(data)

      img.metadata =  
        date: Date.now()
        ownerId: Meteor.userId()

      Images.insert img,  (err, fileObj) ->
        if err
          console.log err

Javascript:

Template.upload.events({
  'change #image-upload': function(e, t) {
    var data, file;
    file = e.target.files[0];
    if (file == null) {
      return;
    }
    return data = processImage(file, 300, 300, function(data) {
      var img;
      img = new FS.File(data);
      img.metadata = {
        date: Date.now(),
        ownerId: Meteor.userId()
      };
      return Images.insert(img, function(err, fileObj) {
        if (err) {
          return console.log(err);
        }
      });
    });
  }
});

You can also fix the orientation without adjusting the image size by passing only the file and the callback.

data = processImage file, (data) ->

You can also pass quality parameter which will be the 3rd argument is you give a size

data = processImage file, 300, 300, 0.5, (data) ->
  # ...

This will give you half quality.