All Projects → twhitbeck → Angular Cropper

twhitbeck / Angular Cropper

Licence: mit
Touch-enabled image cropper for AngularJS

Projects that are alternatives of or similar to Angular Cropper

react-native-avatar-crop
Highly customisable <Crop /> component for React Native < 💅 >
Stars: ✭ 47 (+113.64%)
Mutual labels:  cropper
Croppr.js
A vanilla JavaScript image cropper that's lightweight, awesome, and has absolutely zero dependencies.
Stars: ✭ 294 (+1236.36%)
Mutual labels:  cropper
Jquery Cropper
A jQuery plugin wrapper for Cropper.js.
Stars: ✭ 516 (+2245.45%)
Mutual labels:  cropper
image-cropper
💯一款功能强大的微信小程序图片裁剪插件
Stars: ✭ 1,123 (+5004.55%)
Mutual labels:  cropper
Vue Advanced Cropper
The advanced vue cropper library that gives you opportunity to create your own croppers suited for any website design
Stars: ✭ 281 (+1177.27%)
Mutual labels:  cropper
Wx Cropper
✂️ 微信小程序 图片裁剪工具,简单易用
Stars: ✭ 323 (+1368.18%)
Mutual labels:  cropper
vcrop
A simple Vue image cropping component.
Stars: ✭ 14 (-36.36%)
Mutual labels:  cropper
Image Cropper
💯一款功能强大的微信小程序图片裁剪插件
Stars: ✭ 893 (+3959.09%)
Mutual labels:  cropper
Simple Crop
全网唯一支持裁剪图片任意角度旋转、交互体验媲美原生客户端的全平台图片裁剪组件。
Stars: ✭ 294 (+1236.36%)
Mutual labels:  cropper
Cc
一个基于angular5.0.0+ng-bootstrap1.0.0-beta.8+bootstrap4.0.0-beta.2+scss的后台管理系统界面(没基础的同学请先自学基础,谢谢!)
Stars: ✭ 416 (+1790.91%)
Mutual labels:  cropper
cropper
基于vue的图片裁剪组件 支持vue 2.0
Stars: ✭ 44 (+100%)
Mutual labels:  cropper
Vue Cropper
A simple picture clipping plugin for vue
Stars: ✭ 3,170 (+14309.09%)
Mutual labels:  cropper
Vue Avatar Cropper
👧 A simple and elegant avatar cropping and upload plugin.
Stars: ✭ 398 (+1709.09%)
Mutual labels:  cropper
vue-pic-clip
一个简单的移动端裁剪图片上传插件
Stars: ✭ 30 (+36.36%)
Mutual labels:  cropper
Android Image Cropper
Image Cropping Library for Android, optimized for Camera / Gallery.
Stars: ✭ 5,955 (+26968.18%)
Mutual labels:  cropper
Cropper
Android Library for cropping an image at ease.
Stars: ✭ 21 (-4.55%)
Mutual labels:  cropper
Cropme
Extremely Smooth and Easy Cropping library for you
Stars: ✭ 306 (+1290.91%)
Mutual labels:  cropper
Croppy
Image Cropping Library for Android
Stars: ✭ 906 (+4018.18%)
Mutual labels:  cropper
Photo Editor
A simple photo editing application.
Stars: ✭ 753 (+3322.73%)
Mutual labels:  cropper
Tocropviewcontroller
A view controller for iOS that allows users to crop portions of UIImage objects
Stars: ✭ 4,210 (+19036.36%)
Mutual labels:  cropper

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!
Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].