Starting: 1st of Every Month 
+91 8409492687 
Contact@DevOpsSchool.com
In this PHP tutorial, I am going to tell you how to crop an image using jQuery and upload the image via Ajax. Using the Croppie plugin to crop the image.
First, we create a HTML file “index.html” and include the required library.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <html lang="en"> | |
| <head> | |
| <title>Image Upload and Crop using PHP and jQuery</title> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/css/bootstrap.min.css"> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/croppie/2.6.2/croppie.min.css"> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/croppie/2.6.2/croppie.js"></script> | |
| </head> | |
| <body> | |
| <div class="container"> | |
| <div class="card" style="max-height: 500px;"> | |
| <div class="card-header bg-primary text-center text-white text-bold">Image Upload and Crop using PHP and jQuery</div> | |
| <div class="card-body"> | |
| <div class="row"> | |
| <div class="col-md-4 text-center"> | |
| <div id="upload-demo"></div> | |
| </div> | |
| <div class="col-md-4" style="padding:5%;"> | |
| <strong>Select image to crop:</strong> | |
| <input type="file" id="image"> | |
| <button class="btn btn-success btn-block btn-upload-image" style="margin-top:2%">Cropping Image</button> | |
| </div> | |
| <div class="col-md-4"> | |
| <div id="preview-crop-image" style="background:#9d9d9d;width:300px;padding:50px 50px;height:300px;"></div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <script type="text/javascript"> | |
| var resize = $('#upload-demo').croppie({ | |
| enableExif: true, | |
| enableOrientation: true, | |
| viewport: { // Default { width: 100, height: 100, type: 'square' } | |
| width: 200, | |
| height: 200, | |
| type: 'square' //square | |
| }, | |
| boundary: { | |
| width: 300, | |
| height: 300 | |
| } | |
| }); | |
| $('#image').on('change', function () { | |
| var reader = new FileReader(); | |
| reader.onload = function (e) { | |
| resize.croppie('bind',{ | |
| url: e.target.result | |
| }).then(function(){ | |
| console.log('jQuery bind complete'); | |
| }); | |
| } | |
| reader.readAsDataURL(this.files[0]); | |
| }); | |
| $('.btn-upload-image').on('click', function (ev) { | |
| resize.croppie('result', { | |
| type: 'canvas', | |
| size: 'viewport' | |
| }).then(function (img) { | |
| $.ajax({ | |
| url: "croppie.php", | |
| type: "POST", | |
| data: {"image":img}, | |
| success: function (data) { | |
| html = '<img src="' + img + '" />'; | |
| $("#preview-crop-image").html(html); | |
| } | |
| }); | |
| }); | |
| }); | |
| </script> | |
| </body> | |
| </html> |
by Now, we can create a PHP file “croppie.php” to move the cropped images into a folder and also create a “uploads” folder, put this code.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <?php | |
| $image = $_POST['image']; | |
| list($type, $image) = explode(';',$image); | |
| list(, $image) = explode(',',$image); | |
| $image = base64_decode($image); | |
| $image_name = time().'.png'; | |
| file_put_contents('uploads/'.$image_name, $image); | |
| echo 'successfully uploaded'; | |
| ?> |
And RUN your index file in localhost.
After image upload and cropping.
Reference link:
PHP Fundamental Tutorials with Basic Demo by Chentan in 2020 – Part-1
PHP Fundamental Tutorials with Basic Demo by Chentan in 2020 – Part-2
MotoShare.in provides the perfect two-wheeler for every occasion—daily commuting, weekend escapes, tourist exploration, or test-riding your dream bike. Simplify your mobility with us!
