ngImageEditor

This is a image editor for angular.It can cut image.

Angular Core Dependency: ~1.5.5

Module License: MIT

Added by: Sam Deering

GitHub

Repository

sparrowjang/ngimageeditor

Stats

Stars: 42

Watchers: 42

Forks: 16

Author

SparrowJang
SparrowJang

Module Description

ngImageEditor

demo image

This is a image editor for angular.It can cut image.

##Dependency

  • angularjs

##Demo

demo

##Install

bower install ngImageEditor

##Support

  • IE9+
  • chrome
  • firefox

The input image is not cross domain.It is browser limit.

You can add this header to your server to resolve cross domain.

Access-Control-Allow-Origin: http://your.domain.com

##Usage

Set some attrs of element.

<div img-src="imgSrc" ng-image-editor="imageEditor" selected="selected"></div>

Load a image for cut.

$scope.imgSrc='/images/head.jpeg';

Set a selected block size.

$scope.selected = {width:150,height:150,top:0,left:0};

Get a image data of selected block.

$scope.imageEditor.toDataURL();

##Method

###refresh

Resize and render canvas

##Parameter

###enabledResizeSelector(optonal:default false)

Set a resize selector to be enabled.

Create a attribute to tag.

enabled-resize-selector="enableResizeSelector"

The enabled is true by set.

$scope.enabledResizeSelector = true;

###imgSrc

Set a editor image.

###Selected

Set top、left、width and height for selector.

###toDataURL

output a base64 string

##Event

###on-image-change Event

The image is loaded and rendered.

##Run

Clone this project.

git clone https://github.com/SparrowJang/ngImageEditor
 
cd ngImageEditor

Install the express framework and grunt modules.

npm install

run a server:

grunt server

Finally,open your brower,enter http://localhost:3000/index.html.

Module stats last updated: 2017-02-07 15:00:14

Disclaimer: Some data on this page may have been gathered from the authors GitHub respository. If you see any mistakes or outdated information please let us know. Thanks!