Aviary is a service to quickly integrates a photo editor into your HTML5, IOS, Android and WP7 applications and in this article I show you a little demo to use this amazing widget into your CreateJS/HTML5 canvas mobile and desktop web app.
Aviary Website: http://www.aviary.com
In few words you can open an image from your HTML5/CreateJS application into the Aviary Widget, apply effects, filters and a lot of other stuff, and return the generated image to your canvas.
Here you can watch a short video of my first test and following the source code with some notes and suggestions.
Honestly, I admit I didn’t know this service until today, so following code is just a very crude demo I have created to show you how it’s useful : )
Feel free to ask me more info if you don’t understand some EaselJS instructions. If you have any Aviary question you can get further info from Aviary Custom service:
In the first part of the following code I use EaselJS to display and center an image on Stage:
How it works:
- I first load and display a default image on Stage
– when the image is clicked the Aviary panel is opened and you can apply your image effects.
– when the user saves its work, the “onSave” event is fired. Then we destroy the previous image and we load and display the new generated bitmap.
– when the user closes the Aviary panel we apply a TweenJS animation to the new bitmap.
Most of the second part of the code is generated from the Aviary Service. To get it you need to subscribe their free service and create a new app from their panel.
I have used the EaselJS 0.5.0 “NEXT” version available on CreateJS GitHub page, required to use addEventListener and the cursor property.
Furthermore, in order to use Aviary with EaselJS, I have used two little workarounds :
1) To load images (from web and from the Aviary service) I have used a simple PHP proxy to avoid security restrictions with cross-domain content.
2) Since to open the Aviary Editor we need to pass the image ID and its URL, I have created an hidden html < img > placeholder (called “aviaryImgPlaceHolder”) and I use it to load images and to get a reference ID to pass to Aviary launchEditor method.
I have tried to dinamically create an Image object but it didn’t work with Aviary. Feel free to fix and improve this step.
My purpose was just testing this service with EaselJS and I didn’t spend a lot of time on this “issue”.
Hope you enjoy it