Giter Club home page Giter Club logo

meteor-photo-up's Introduction

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

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.