angular-cropper

0.9.0 • Public • Published

angular-cropper

Touch-enabled image cropper for AngularJS

Demo

Get it

$ bower install angular-cropper

or

$ npm install angular-cropper

Use it

  • Include files in your html
    • bower_components/angular-file-reader/angular-file-reader.js
    • bower_components/angular-cropper/angular-cropper.js
  • Include tw.directives.cropper in your module dependencies
    • angular.module('myApp', ['tw.directives.cropper']);
  • Place the tw-cropper attribute on a canvas
    • <canvas width="300" height="300" tw-cropper="cropper"></canvas>
  • Give your cropper a source
    • <canvas width="300" height="300" tw-cropper="cropper" source="myFile"></canvas>
    • source must be a File
    • See the demo for one way to get a File to your scope
    • Or use twhitbeck/angular-file-input
  • Get the dataURL of your crop with controller toDataURL method
    • <button ng-click="upload(cropper.toDataURL())">Save</button>
  • That's it!

Package Sidebar

Install

npm i angular-cropper

Weekly Downloads

22

Version

0.9.0

License

ISC

Last publish

Collaborators

  • twhitbeck