angular-image-cropper

WebJar for angular-image-cropper

License	MIT
Categories	Github Development Tools Version Controls Angular User Interface Web Frameworks
GroupId	org.webjars.npm
ArtifactId	github-com-doonot-angular-image-cropper-v2
Last Version	2.0.1
Release Date	Aug 31, 2017
Type	jar
Description	angular-image-cropper WebJar for angular-image-cropper
Project URL	http://webjars.org
Source Code Management	https://github.com/doonot/angular-image-cropper-v2

Download github-com-doonot-angular-image-cropper-v2

Filename	Size
github-com-doonot-angular-image-cropper-v2-2.0.1.pom
github-com-doonot-angular-image-cropper-v2-2.0.1.jar	17 MB
github-com-doonot-angular-image-cropper-v2-2.0.1-sources.jar	22 bytes
github-com-doonot-angular-image-cropper-v2-2.0.1-javadoc.jar	22 bytes

How to add to project

Apache Maven

<!-- https://jarcasting.com/artifacts/org.webjars.npm/github-com-doonot-angular-image-cropper-v2/ -->
<dependency>
    <groupId>org.webjars.npm</groupId>
    <artifactId>github-com-doonot-angular-image-cropper-v2</artifactId>
    <version>2.0.1</version>
</dependency>

Gradle Groovy

// https://jarcasting.com/artifacts/org.webjars.npm/github-com-doonot-angular-image-cropper-v2/
implementation 'org.webjars.npm:github-com-doonot-angular-image-cropper-v2:2.0.1'

Gradle Kotlin

// https://jarcasting.com/artifacts/org.webjars.npm/github-com-doonot-angular-image-cropper-v2/
implementation ("org.webjars.npm:github-com-doonot-angular-image-cropper-v2:2.0.1")

Apache Buildr

'org.webjars.npm:github-com-doonot-angular-image-cropper-v2:jar:2.0.1'

Apache Ivy

<dependency org="org.webjars.npm" name="github-com-doonot-angular-image-cropper-v2" rev="2.0.1">
  <artifact name="github-com-doonot-angular-image-cropper-v2" type="jar" />
</dependency>

Groovy Grape

@Grapes(
@Grab(group='org.webjars.npm', module='github-com-doonot-angular-image-cropper-v2', version='2.0.1')
)

Scala SBT

libraryDependencies += "org.webjars.npm" % "github-com-doonot-angular-image-cropper-v2" % "2.0.1"

Leiningen

[org.webjars.npm/github-com-doonot-angular-image-cropper-v2 "2.0.1"]

Dependencies

compile (1)

Group / Artifact	Type	Version
org.webjars.npm : angular	jar	1.4.9

Project Modules

There are no modules declared in this project.

Angular image cropper

Live example

To see a live example, go to the demo's page.

Description

Angular image cropper is inspired of the popular Guillotine jQuery plugin that allows to drag, zoom or rotate an image to select a cropping area. Like selecting the display area of a profile picture or avatar.

• Responsive: The window (or selection area) is fully responsive (fluid)
• Touch support: Dragging the image also works on touch devices
• API: Provide an API to do more action with code
• No needs of jQuery: Written in pure javascript

Installation

Using NPM

npm install angular-image-cropper

Using Bower (not recommended)

bower install https://unpkg.com/angular-image-cropper/bower.zip

Or if you want to install a specific version (e.g: for 1.1.4):

bower install https://unpkg.com/[email protected]/bower.zip --save

Usage

Load the required files

Using modules

Just require the module when you declare your module's dependencies:

var angular = require('angular');
angular
  .module('myApp', [require('angular-image-cropper')])
  .controller(/*...*/);

Using script tags

Just import the angular-image-cropper javascript file in your index.html:

<script src="/path/to/angular-image-cropper.js"></script>

Add the module as dependency to your main application module like this:

angular.module('myApp', ['imageCropper']);

The directive

<image-cropper image-url="myImageUrlOrBase64"
  width="640"
  height="480"
  show-controls="true"
  fit-on-init="false"
  center-on-init="true"
  api="getApiFunction"
  crop-callback="myCallbackFunction"
  check-cross-origin="false"
  zoom-step="0.1"
  action-labels="myButtonLabelsObject"
></image-cropper>

Options

Angular image cropper comes with some options to simplify your development:

• image-url string Source image that will be cropped, can be an URL or base64
• width string Width of the cropped image
• height string Height of the cropped image
• zoom-step string Zoom step
• fit-on-init boolean Fit the image on cropper initialization (keep the ratio)
• center-on-init boolean Center the image on cropper initialization
• show-controls boolean Display or not the control buttons (true by default)
• check-cross-origin boolean Enable cross origin or not
• crop-callback function Function executed with base64 cropped image as argument when when crop control is clicked

vm.updateResultImage = function(base64) {
  vm.resultImage = base64;
  $scope.$apply(); // Apply the changes.
};

• api function Function executed with cropper's API as argument
• action-labels object Give you the ability to customize button labels by passing an object like

vm.myButtonLabels = {
  rotateLeft: ' (rotate left) ',
  rotateRight: ' (rotate right) ',
  zoomIn: ' (zoomIn) ',
  zoomOut: ' (zoomOut) ',
  fit: ' (fit) ',
  crop: ' <span class="fa fa-crop">[crop]</span> ' // You can pass html too.
}

Api

Angular image cropper gives you access to the api, you can see an example here:

// Cropper API available when image is ready.
vm.getCropperApi = function(api) {
  api.zoomIn(3);
  api.zoomOut(2);
  api.rotate(270);
  api.fit();
  vm.resultImage = api.crop();
};

• crop function return the cropped image in base64
• fit function fit the image to the wrapper dimensions (keep the ratio)
• rotate function Apply the rotation with degrees given, should be a modulo of 90 (90, 180, 270, 360), can be negative
• zoomIn function Apply the zoomIn given
• zoomOut function Apply the zoomOut given
• remove function Remove the cropper

License

The MIT License (MIT)

Versions

Version
2.0.1 Aug 31, 2017
0.0.0-semantically-released Aug 30, 2017