Crop, Resize, Frames etc on selected image in php using Aviary
In this post we will give you information about Crop, Resize, Frames etc on selected image in php using Aviary. Hear we will give you detail about Crop, Resize, Frames etc on selected image in php using AviaryAnd how to use it also give you demo for it if it is necessary.
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
<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
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 >
<div >
<div >
<label ><b>Upload your image:</b></label>
<input type="file" id="Image">
<div >
<div id="photo">
<img width="300px;" id="ImagePreview" src="http://asara.me/Aviary-Example/preview.jpg" alt="your image"/>
</div>
<button type="button" id="editImagePreview"> Edit!
</button>
</div>
</div>
</div>
</div>
</form>
</fieldset>
</body>
</html>
Hope this code and post will helped you for implement Crop, Resize, Frames etc on selected image in php using Aviary. if you need any help or any feedback give it in comment section or you have good idea about this post you can give it comment section. Your comment will help us for help you more and improve us. we will give you this type of more interesting post in featured also so, For more interesting post and code Keep reading our blogs