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

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

by Shahriar Sagor

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 .

  <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
        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) {
                launchEditor('ImagePreview', e.target.result)
                $('#ImagePreview').attr('src', e.target.result);
    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="http://asara.me/Aviary-Example/preview.jpg" alt="your image"/>
                    <button  type="button" class="black-add-button" id="editImagePreview"> Edit!

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.


You may also like