update readme file

allenJynRoyston · Jul 24, 2017 · 533d5f8 · 533d5f8
1 parent 5cb030b
commit 533d5f8
Showing 1 changed file with 65 additions and 56 deletions.
diff --git a/README.md b/README.md
@@ -1,80 +1,78 @@
 # ngCroppie - Angular Croppie Tool
-What Am I?!
 
-An awesome image cropping and rotating module for AngularJS based on Croppie.js<br>
-Pure Javascript implementation; Also responsive!
-
-## Live Demo
+[![Build Status][travis-image]][travis-url]
+[![NPM version][npm-image]][npm-url]
+[![DevDependencies Status][devdepstat-image]][devdepstat-url]
+[![MIT License][license-image]][license-url]
 
-[Check it out](https://allenroyston.herokuapp.com/access/acr-croppie/)
+> Angular Croppie Tool is an image cropping and rotating module for AngularJS based on [Croppie.js](https://github.com/Foliotek/Croppie/)<br>
+Pure Javascript implementation; Also responsive!
 
-## Install
-NPM: `npm install ng-croppie`
+## Dependencies
+- [Angular](https://github.com/angular/angular.js)
+- [Croppie.js](https://github.com/Foliotek/Croppie/)
 
-Bower: `bower install ngCroppie`
+## Installation
 
-Download: [ng-croppie.js](ng-croppie.js) and [ng-croppie.css](ng-croppie.css)
+```sh
+# Using bower:
+$ bower install ng-croppie
 
-## Ensure you link it correctly in your HTML<br>
-```
-<script src="path/to/ng-croppie.min.js"></script>
-<link rel='stylesheet' type="text/css" href="path/to/ng-croppie.min.css"></link>
+# Using npm:
+$ npm install ng-croppie
 ```
-<!--
-## CDN
-cdnjs.com provides croppie via cdn https://cdnjs.com/libraries/ng-croppie
-```
-https://cdnjs.cloudflare.com/ajax/libs/ng-croppie/{version}/ng-croppie.min.css
-https://cdnjs.cloudflare.com/ajax/libs/ng-croppie/{version}/ng-croppie.min.js
-```
--->
 
-And add it as a module for your app:<br>
-```
-var app = angular.module('myApp', ['ngCroppie']);
+## 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](http://orif-jr.github.io/ng-croppie/#demo)
+
+## Example
+**JS**
+```js
+function ExampleCtrl(FileSaver, Blob) {
+  var vm = this;
+
+  vm.val = {
+    text: 'Hey ho lets go!'
+  };
+
+  vm.download = function(text) {
+    var data = new Blob([text], { type: 'text/plain;charset=utf-8' });
+    FileSaver.saveAs(data, 'text.txt');
+  };
+}
+
+angular
+  .module('fileSaverExample', ['ngCroppie'])
+  .controller('ExampleCtrl', ['FileSaver', 'Blob', ExampleCtrl]);
 ```
 
-
-Nothing is required in the controller. For sake of clarity, these are the variables you'll see in the demo.<br>
-```
-    app.controller('basicController', ['$scope', function($scope) {
-
-            $scope.inputImage = null;
-            $scope.outputImage = null;
-            $scope.onUpdate = function(data) {
-                //console.log(data)
-            }
-    }]);
-```
-
-
-Now, just add it to your HTML.<br>
-```
-<!-- Bare minimum -->
-<ng-croppie   src="inputImage"
-              ng-model='outputImage'>
-</ng-croppie>
-
-
-
-<!-- With options -->
+**HTML**
+```html
 <ng-croppie   src="inputImage"
               ng-model='outputImage'
               update='onUpdate'
               boundry="{w: 400, h: 400}"
               viewport="{w: 300, h: 300}"
               orientation="true"
-              rotation="90"  <!-- rotatation to 90 degrees -->
+              rotation="90"
               type="circle">
 </ng-croppie>
 
 
 
 <!-- Preview -->
-<img  ng-src="{{outputImage}}" />
+<img ng-src="{{outputImage}}" />
 ```
 
 
+
+
 ## Parameters
 ```
 src: [path/to/image.js] OR base64. 
@@ -107,10 +105,21 @@ type: [String] Can either be "circle" or "square". Not required; defaults to "sq
 - reorganized files location
 - code refactoring
 
-### Dependencies
-- Angular 1.4+
-- Croppie.js
+### License
+MIT © [ngCroppie](https://github.com/allenRoyston/ngCroppie)
 
+[travis-url]: https://img.shields.io/travis/allenRoyston/ngCroppie
+[travis-image]: https://img.shields.io/travis/allenRoyston/ngCroppie.svg
 
-### License
-MIT - go nuts y'all.
+[npm-url]: https://npmjs.org/package/ng-croppie
+[npm-image]: https://img.shields.io/npm/v/ng-croppie.svg
+
+<!-- [![Dependency Status][depstat-image]][depstat-url] -->
+[depstat-url]: https://david-dm.org/allenRoyston/ngCroppie
+[depstat-image]: https://david-dm.org/allenRoyston/ngCroppie.svg
+
+[devdepstat-url]: https://david-dm.org/allenRoyston/ngCroppie?type=dev
+[devdepstat-image]: https://david-dm.org/allenRoyston/ngCroppie/dev-status.svg
+
+[license-image]: http://img.shields.io/badge/license-MIT-blue.svg?style=flat
+[license-url]: LICENSE