teusemanuel/angular-image-crop

A demo for cropping profile pictures with Angular, Jcrop, and Node.js

angular-image-crop

Demo at https://coolaj86.github.com/angular-image-crop

This is a demo of jquery's jcrop wrapped in an angular directive and controller.

• /app/scripts/app.js
• /app/scripts/controller/profile-pic.js
• /app/styles/profile-pic.css
• /app/views/profile-pic.jade

It's not complete, but you can test it out.

The directive is provided in the module aj.crop.

Install

git clone https://github.com/coolaj86/angular-image-crop.git angular-image-crop
pushd angular-image-crop/
git remote rename origin upstream

npm install -g yo
npm install -g generator-angular
npm install -g bower

npm install
bower install

grunt build --force

Use

grunt build --force
grunt serve

# The --force is in case you don't have compass installed
# If you feel the need for compass, figure out how to install it
# and immediately apply FML relief cream to the affected areas generously

Similar Work

• cropUploader With a few tweaks to get this working on mobile, this would be an ideal solution.

• Jcrop (jQuery) - I'm using this under-the-hood until I have the time to do it myself in "pure Angular"

• imgAreaSelect (jQuery)

• Angular Jcrop Directive I probably used parts of this in my implementation.

• AngularJS Directive for Image Cropping I started with this as my base example