An AngularJS directive for the Creative SDK Image Editor UI component.

Live Demo

Copyright © 2016, Massimiliano Sartoretto

Find me on:

You can choose your preferred method of installation:

• Through bower: bower install angular-aviary --save
• Through npm: npm install angular-aviary --save
• Download from github: angular-aviary.min.js

1. Include the scripts:

   1. the Creative SDK Image Editor script (http and https versions available here)
   2. angular-aviary.min.js

   Example:

   <script src="http://feather.aviary.com/imaging/v3/editor.js"></script>
   <script src="bower_components/angular-aviary/angular-aviary.min.js"></script>

2. Add the module ngAviary as a dependency to your app module:

   var myApp = angular.module('myapp', ['ngAviary']);

To configure the Image Editor, call the ngAviaryProvider.configure() method (e.g. inside your app's config() callback):

myApp.config(function(ngAviaryProvider) {
  ngAviaryProvider.configure({
    apiKey: 'my-awesome-api-key',
    theme: 'light',
    tools: 'all'
  })
});

For the full list of config options, please refer to the official docs.

Use the ngAviary directive to create a toggle that triggers the Image Editor.

Example:

<a href="#"
   target-selector='<selector>'
   target-src='./image.png'
   on-save-button-clicked='onSaveButtonClicked(id)'
   on-save='onSave(id, newURL)'
   ng-aviary> Edit photo </a>

You can use the HTML element you prefer as long as it supports the onClick event. (For a list of supported elements, refer to the onClick docs)

Options that allow you to handle the Creative SDK Image Editor flow: