Hello friends, very very thanks to read my tutorial. In this tutorial, I am going to discuss about the cropping process. In nowadays cropping is essential for any site basically for the social networking site where the user can upload their profile picture and other photos. But we need to crop those picture for our site responsivity. And I have found a great and simple jquery plugin for cropping any image. So let’s enter to the main process.
Documentation
We need to use cropper.js and cropper.css for accessing this cropping plugins. So please visit this link and download that two file.
https://github.com/fengyuanchen/cropperjs
Also we need to add jquery and bootstrap library for this purpose. So now we are ready to make a simple cropping using cropper js.
What we do?
First, we will create a simple bootstrap modal. When a user chooses an image then it will show on that modal popup and after that, he/she can crop the image which will be stored automatically in the server folder. I have already a ready-made HTML code for that. You can use that one.
HTML Code
<!DOCTYPE html> <html> <head> <title></title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <link href="cropper.css" media="screen" rel="stylesheet" type="text/css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <script src="cropper.js" ></script> <style> .image-wrapper img { max-width: 100%; /* This rule is very important, please do not ignore this! */ } </style> </head> <body> <input type="file" id="my-img"> <img id="preview_img" src="#"> <div id="myModal" class="modal fade" role="dialog"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal">×</button> <h4 class="modal-title">Modal Header</h4> </div> <div class="modal-body"> <div class="image-wrapper"> <img id="image-1" src="#" alt="your image" style="width: 100%;" /> </div> </div> <div class="modal-footer"> <span id="crop-wait-msg" style="color: #2b3481;display: none;">Waitting for sometime....</span> <button type="button" class="btn btn-default" onclick="cropYourImg()">Crop</button> </div> </div> </div> </div> </body> </html>
Javascript & Jquery Code
<script> var $image= $('#image-1'); function readURL(input) { if (input.files && input.files[0]) { var reader = new FileReader(); reader.onload = function (e) { $image.attr('src', e.target.result); } reader.readAsDataURL(input.files[0]); setTimeout(function(){ $image.cropper({ aspectRatio: 16 / 9, crop: function(event) { console.log(event.detail.x); console.log(event.detail.y); console.log(event.detail.width); console.log(event.detail.height); console.log(event.detail.rotate); console.log(event.detail.scaleX); console.log(event.detail.scaleY); } }); // Get the Cropper.js instance after initialized $image.data('cropper'); },500); $('#myModal').modal('show'); } } $("#my-img").change(function(){ var imgSize = parseFloat(this.files[0].size / 1024).toFixed(2); if(imgSize>2048){ alert("Image size is too large. Please try to upload less than 2 Mb."); $('#my-img').val(''); //This is for choose same image again } else{ $image.cropper('destroy'); //This is for destroy the previous cropper instance $image.attr('src','#'); readURL(this); $('#my-img').val(''); //This is for choose same image again } }); function cropYourImg(){ var imageData = $image.cropper('getCroppedCanvas').toDataURL('image/jpeg'); $.ajax({ url: "upload.php", //Php script to store the cropping image type: "POST", data: {image:imageData}, contentType : 'application/x-www-form-urlencoded; charset=UTF-8', cache: false, success: function(res){ $('#preview_img').attr('src',imageData); $('#crop-wait-msg').css('display','none'); console.log(res); $('#myModal').modal('hide'); //After cropping modal should be hide. } }); }</script>
Now we have cropped that image and this is the time to save the image in a server folder. We will do that by using a simple PHP script. Also, we need to create a folder named “Upload“, where we will store uploaded image.
PHP Code
<?php define('UPLOAD_DIR', './upload/'); $img = $_POST['image']; $img = str_replace('data:image/jpeg;base64,', '', $img); $img = str_replace(' ', '+', $img); $data = base64_decode($img); $file = uniqid() . '.jpg'; $path = UPLOAD_DIR . $file; $success = file_put_contents($path, $data); print $success ? $file : 'Unable to save the file.'; ?>
If everything is ok then it will store the image in the upload folder and return the uploaded image name to the jquery success function.That’s all. Thank’s to everyone.
its not working man
Uncaught TypeError: $image.cropper is not a function
Errror coming.