ng-croppie

WebJar for ng-croppie

License	ISC
GroupId	org.webjars.npm
ArtifactId	ng-croppie
Last Version	1.0.0
Release Date	May 4, 2017
Type	jar
Description	ng-croppie WebJar for ng-croppie
Project URL	http://webjars.org
Source Code Management	https://github.com/allenRoyston/ngCroppie

Download ng-croppie

Filename	Size
ng-croppie-1.0.0.pom
ng-croppie-1.0.0.jar	19 KB
ng-croppie-1.0.0-sources.jar	22 bytes
ng-croppie-1.0.0-javadoc.jar	22 bytes

How to add to project

Apache Maven

<!-- https://jarcasting.com/artifacts/org.webjars.npm/ng-croppie/ -->
<dependency>
    <groupId>org.webjars.npm</groupId>
    <artifactId>ng-croppie</artifactId>
    <version>1.0.0</version>
</dependency>

Gradle Groovy

// https://jarcasting.com/artifacts/org.webjars.npm/ng-croppie/
implementation 'org.webjars.npm:ng-croppie:1.0.0'

Gradle Kotlin

// https://jarcasting.com/artifacts/org.webjars.npm/ng-croppie/
implementation ("org.webjars.npm:ng-croppie:1.0.0")

Apache Buildr

'org.webjars.npm:ng-croppie:jar:1.0.0'

Apache Ivy

<dependency org="org.webjars.npm" name="ng-croppie" rev="1.0.0">
  <artifact name="ng-croppie" type="jar" />
</dependency>

Groovy Grape

@Grapes(
@Grab(group='org.webjars.npm', module='ng-croppie', version='1.0.0')
)

Scala SBT

libraryDependencies += "org.webjars.npm" % "ng-croppie" % "1.0.0"

Leiningen

[org.webjars.npm/ng-croppie "1.0.0"]

Dependencies

There are no dependencies for this project. It is a standalone project that does not depend on any other jars.

Project Modules

There are no modules declared in this project.

ngCroppie - Angular Croppie Tool

Angular Croppie Tool is an image cropping and rotating module for AngularJS based on Croppie.js
Pure Javascript implementation; Also responsive!

Dependencies

• Angular
• Croppie.js

Installation

# Using bower:
$ bower install ngCroppie

# Using npm:
$ npm install ng-croppie

Basic usage

• Include ngCroppie module into your project;
• No dependencies are required in the controller;
• Add <ng-croppie> tag with the following arguments:
  • src Image or Blob: path to Image File or Base64;
  • ng-model Base64: the image output;

Demo

Example

JS

function ExampleCtrl() {
  var vm = this;

  vm.inputImage = null;
  vm.outputImage = null;

  vm.onUpdate = function(data) {
    //console.log(data);
  };
}

angular
  .module('exampleModule', ['ngCroppie'])
  .controller('ExampleCtrl', [ExampleCtrl]);

HTML

<ng-croppie   src="inputImage"
              ng-model='outputImage'
              update='onUpdate'
              boundry="{w: 400, h: 400}"
              viewport="{w: 300, h: 300}"
              orientation="true"
              rotation="90"
              type="circle">
</ng-croppie>



<!-- Preview -->
<img ng-src="{{outputImage}}" />

Parameters

• Image or Blob data: path to image file or base64;
• Base64 ng-model: the image output, returns are a base64;
• Function update: place a functon in the controller to run whenever changes are made to the image;
• Object boundry { w: __, h: __ }: (optional) the size of the container that will host the croppie tool - defaults to 400x400;
• Object viewport { w: __, h: __ }: (optional) the output size, must be smaller than the boundry or it will equal it - defaults to 300x300;
• Boolean zoom: (optional) enable zoom slider - defaults to true;
• Boolean mousezoom: enable mouse scroll bar to zoom in/out. Works with zoom - defaults to true;
• Boolean zoomslider: enable zoom slider only (scrolling and pinching zoom still possible if set to false), works with zoom - defaults to true;
• Boolean exif: (optional) enable exif orientation compatability - defaults to undefined;
• Boolean orientation: (optional) enable custom orientation support when binding images - defaults to false.
• Integer rotation: rotate the image by a specified degree amount, works with orientation - valid values: 90, 180, 270, -90, -180, -270;
• String type: (optional) can either be 'circle' or 'square' - defaults to 'square';
• Boolean mobile: (optional) enable mobile view - defaults to viewport: 250x250 and boundry: 300x300;

Version

1.2.2

Updates

• fix source interval time for firefox
• fix travis build badge
• add changelog file

Contributors

• orif-jr
• stasinua
• htao00
• alanheppenstall

License

MIT © ngCroppie

Versions

Version
1.0.0 May 4, 2017