In this tutorial, we will learn how to Crop, Resize, Frames etc on selected image in php using Aviary


  <title>Aviary Image Upload Demo</title>
  <script type="text/javascript" src=""></script>
  <script type="text/javascript" src=""></script>
  <script type="text/javascript" >  
    /* edit Images using aviray */
    var featherEditor = new Aviary.Feather({
        apiKey: '', // your api key , you can get one from
        apiVersion: 3, // the api version . 3 is the last one so far
        theme: 'dark', // there are 'light' and 'dark' themes
        tools: 'all', // you can specify the tools from here, you can include/exclude what ever you want
        appendTo: '',
        onSave: function(imageID, newURL) {
            var img = document.getElementById(imageID);
            img.src = newURL; // after save, replacs the image with the new one from
        onError: function(errorObj) { 
    /* after upload call read image function*/
    $(document).on('change', '#Image', function() {
       // readImage(this);
       if (this.files && this.files[0]) {
            var reader = new FileReader();    
            reader.onload = function (e) {
    function launchEditor(id, src) {
            image: id,
            url: src
       return false;
    $(document).on('click', '#editImagePreview', function() {
         var url =$('#ImagePreview').attr("src");
         return launchEditor('ImagePreview', url);
     <form action="#" method="post"  enctype="multipart/form-data">
        <div class="widget">
           <div class="well">
              <div class="controls controls-width span12"  >
                 <label class="control-label"><b>Upload your image:</b></label>
                 <input type="file" id="Image">
                 <div class="imageupload">
                    <div id="photo">
                       <img width="300px;" id="ImagePreview" src="" alt="your image"/>
                    <button  type="button" class="black-add-button" id="editImagePreview"> Edit!

May this example help you