Crop,Resize,Frames etc on selected image in php using Aviary

Share Me
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  

Today now in this blog i will show you how to crop,resize,frames etc on selected image in php by using Aviary. Sometimes we need to use any image plugin for select a image and also for crop,resize,effects,frames,strickers ect action. So if we need to use Aviary api as like as we see on facebook, twitter ect. social media application. All that site plugins are provide a lots of effects and api guide on that way we can use easily in our web app and also as well as on mobile app too. So, now here I am going to give you a demo of how to use this api in our application .

Code:
<html>
<head>
  <title>Aviary Image Upload Demo</title>
  <script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
  <script type="text/javascript" src="http://feather.aviary.com/js/feather.js"></script>
  <script type="text/javascript" >  
    /* edit Images using aviray */
    var featherEditor = new Aviary.Feather({
        apiKey: '', // your api key , you can get one from http://developers.aviary.com/
        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 aviary.com
            featherEditor.close();
        },
        onError: function(errorObj) { 
            alert(errorObj.message);
        }
    });
    /* 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) {
                launchEditor('ImagePreview', e.target.result)
                $('#ImagePreview').attr('src', e.target.result);
            }
            reader.readAsDataURL(this.files[0]);                           
        }
    });                   
    function launchEditor(id, src) {
        featherEditor.launch({
            image: id,
            url: src
        });
       return false;
    }
    $(document).on('click', '#editImagePreview', function() {
         var url =$('#ImagePreview').attr("src");
         return launchEditor('ImagePreview', url);
    });       
  </script>
</head>
<body>
  <fieldset>
     <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="http://asara.me/Aviary-Example/preview.jpg" alt="your image"/>
                    </div>
                    <button  type="button" class="black-add-button" id="editImagePreview"> Edit!
                    </button> 
                 </div>
              </div>
           </div>
        </div>     
     </form>
  </fieldset>
</body>
</html>

Read Also : How to add prefix in each key of PHP Array?

Thanks for read. I hope it help you. For more you can follow us on facebook.

About Shahriar Sagor

My name is Shahriar sagor. I'm a developer. I live in Bangladesh and I love to write tutorials and tips that will help to other Developer's. I am a big fan of PHP, Javascript, JQuery, Laravel, Codeigniter, VueJS, AngularJS and Bootstrap from the early stage.

View all posts by Shahriar Sagor →