crop with resize image using the croppie plugin – onlinecode
In this post we will give you information about crop with resize image using the croppie plugin – onlinecode. Hear we will give you detail about crop with resize image using the croppie plugin – onlinecodeAnd how to use it also give you demo for it if it is necessary.
Today, In this tutorial, we are going to tell you how to crop with resize and upload using jquery ajax and php. so let’s discuss about croppie plugin.
It’s used to create user avatar(thumbnail) image and the specific size-wise or crop images are used in many websites, so we will use the cropping plugin for that type image upload.
How to revoke 'git add' before 'git commit' ?
In this post we will give you information about How to revoke 'git add' before 'git commit' ?. Hear we will give you detail about How to revoke 'git add' before 'git commit' ?And how to use it also give you demo for it if it is necessary.
Sometimes you need to undo your git file before you git comment command. Because you made a some misteck or wrong code and you did git add using "git add ." command then you think how to undo your code before git commit command. But you can do that using git reset command, if you need to undo all file Or you may need to undo just one then you can do using git reset command, you can see bellow command.
Example:
// For Spesific filegit reset
// For all files
git reset
Hope this code and post will helped you for implement How to revoke 'git add' before 'git commit' ?. 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
jquery Croppie plugin is an Html5 canvas-based image cropping library and it’s provided zooming facility and cropper type option like as square and circle.
index.php
In this file, we are creating the bootstrap modal and when the user clicks on add image button then will be open the modal and user can resize and crop the image. when the user clicks on upload images button then the image will be upload in the upload directory by ajax.
<!DOCTYPE html>
<html lang="en">
<head>
<title>crop with resize image using the croppie plugin</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/croppie/2.6.3/croppie.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/croppie/2.6.3/croppie.css">
</head>
<body>
<div >
<div >
<div >
<h2>Image Upload</h2>
</div>
</div>
<div >
<div >
<div id="upload_image" style="background:#e1e1e1;width:300px;padding:30px;height:300px;"></div>
</div>
</div>
<br>
<div >
<div >
<button type="button" data-toggle="modal" data-target="#myModal">Add Image</button>
</div>
</div>
</div>
<!-- Modal -->
<div id="myModal" role="dialog">
<div >
<!-- Modal content-->
<div >
<div >
<button type="button" data-dismiss="modal">×</button>
<h4 >Upload image</h4>
</div>
<div >
<div >
<div >
<div id="select_image" style="width:350px"></div>
</div>
</div>
<div >
<div >
<label for="pwd">Select Image::</label>
<input type="file" id="upload">
</div>
<div >
<button >Upload Image</button>
</div>
</div>
</div>
<div >
<button type="button" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<script type="text/javascript">
$uploadCrop = $('#select_image').croppie({
enableExif: true,
viewport: {
width: 200,
height: 200,
type: 'square'
},
boundary: {
width: 300,
height: 300
}
});
$('#upload').on('change', function () {
var reader = new FileReader();
reader.onload = function (e) {
$uploadCrop.croppie('bind', {
url: e.target.result
}).then(function(){
console.log('jQuery bind complete');
});
}
reader.readAsDataURL(this.files[0]);
});
$('.upload_result').on('click', function (ev) {
$uploadCrop.croppie('result', {
type: 'canvas',
size: 'viewport'
}).then(function (resp) {
$.ajax({
url: "save_image.php",
type: "POST",
data: {"image":resp},
success: function (data) {
html = '<img src="' + resp + '" />';
$("#upload_image").html(html);
$("#myModal").modal("hide");
}
});
});
});
</script>
</body>
</html>
save_image.php
<?php
$data = $_POST['image'];
list($type, $data) = explode(';', $data);
list(, $data) = explode(',', $data);
$data = base64_decode($data);
$imageName = time().'.png';
file_put_contents('upload/'.$imageName, $data);
echo 'success';
?>
Hope this code and post will helped you for implement crop with resize image using the croppie plugin – onlinecode. 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