Crop, Resize, Frames etc on Selected Image in PHP using Aviary

By Hardik Savani May 14, 2024 Category : PHP Javascript HTML CSS jQuery

Whenever you require to use any image plugin for select image and crop,resize,effects,frames,strickers ect, so you have to use Aviary api like as you see of facebook, twitter ect., that site plugin provide lots of efects and api guide that way you can use easily in your web app and as well as on mobile app too. So, I am going to give demo of how to use this api in our side.

Preview:

Example

Read Also: How to Convert Camel Case to Snake Case in PHP?
<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>

Tags :
Previous

Laravel Change Date Format using Carbon Example
Next

How to Remove Query String from URL using JQuery?

We are Recommending you

Popular Posts

Categories

Latest Posts

Shares