Photo Up

Meteor package to upload (into the Meteor client), resize and crop an image.

Warning: Only works with Meteor 1.0.4+

Currently uses Materialize for the UI. You are responsible for installing Materialize.
Will remove in the future or make other frameworks an option.

Install

meteor add pfafman:photo-up

Usage

In a template add

<template name="myTemplate">
	{{> photoUp photoUpOptions}}
</template>

then in the templates javascript/coffeescript file

Template.myTemplate.helpers
    photoUpOptions: ->
        loadImage:
           # ... see loadImage site
        crop: true # If true do jCrop with setting below
        jCrop:
        	# ... see jcrop site
        callback: (error, photo) ->
           # Do what you want with the photo.  Save it?

Options

Can pass in the options for load-image and Jcrop

• loadImage - { ... load image options see site ... }

• crop - bool if true then do jCrop after upload.

• jCrop - { ... Jcrop options see site ... }

• autoSelectOnJcrop - This will select a default region for cropping when the photo is loaded. Is always true on Cordova.

• framework - Choose framework. Only option currently is 'materialize' the default

• showInfo - bool show image information

• showClear - Show button to clear the image.

• minDisplayWidth: minimum width for the display window

• minDisplayHeight: minimum height for the display window

• requiredAspectRatio: number, if set will require the given aspect ratio and only return the image if it is valid.

• callback - function that gets the photo object as a parameter when ever it changes.

	photo:
	  name: file.name         # (without the type suffix)
      filesize: file.size
      img: img                # the img returned from load-image
      src: img.toDataURL()
      size: img.toDataURL().length
      newImage: true
      orientation: (from exif or 1)
      svg: svg blob if the file is an svg file. 

UI

You can change the UI by overwriting the CSS.

.photo-up  {
  // See source CSS for the source variables.
}

TODO

• Make UI framework agnostic or implement other frameworks (bootstrap ...)
• Mess with jCrop for if you start messing with sizing the cropping can get all messed up.

License

MIT