article

Friday, April 15, 2022

Crop And Upload Image using PHP and JQuery Ajax - Croppie Image Cropper

Crop And Upload Image using PHP and JQuery Ajax - Croppie Image Cropper

Bootstrap 5
https://getbootstrap.com/docs/5.0/getting-started/introduction/
https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css

Jquery
https://jquery.com/download/
CDN : jsDelivr CDN
https://www.jsdelivr.com/package/npm/jquery
https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js

Croppie
Croppie is a fast, easy to use image cropping plugin with tons of configuration options!

https://foliotek.github.io/Croppie/
https://cdnjs.com/libraries/croppie
https://cdnjs.cloudflare.com/ajax/libs/croppie/2.6.5/croppie.css
index.php
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
//index.php
<html> 
  <head> 
    <title>Crop And Upload Image using PHP and JQuery Ajax - Croppie Image Cropper</title> 
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/croppie/2.6.5/croppie.css" />
     
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/croppie/2.6.5/croppie.min.js"></script>
  </head> 
<body> 
<div class="container" style="margin-top:20px;padding:20px;"> 
    <div class="card">
      <div class="card-header">
        Crop And Upload Image using PHP and JQuery Ajax - Croppie Image Cropper
      </div>
      <div class="card-body">
        <h5 class="card-title">Select Image</h5>
        <input type="file" name="upload_image" id="upload_image" />      
      </div>
    </div>
 
    <div class="card text-center" id="uploadimage" style='display:none'>
      <div class="card-header">
        Upload & Crop Image
      </div>
      <div class="card-body">
            <div id="image_demo" style="width:350px; margin-top:30px"></div>
            <div id="uploaded_image" style="width:350px; margin-top:30px;"></div> 
      </div>
      <div class="card-footer text-muted">
        <button class="crop_image">Crop & Upload Image</button>
      </div>
    </div>
</div>
</body> 
</html>
  
<script> 
$(document).ready(function(){
 $image_crop = $('#image_demo').croppie({
    enableExif: true,
    viewport: {
      width:200,
      height:200,
      type:'circle' //circle
    },
    boundary:{
      width:300,
      height:300
    }
  });
  $('#upload_image').on('change', function(){
    var reader = new FileReader();
    reader.onload = function (event) {
      $image_crop.croppie('bind', {
        url: event.target.result
      })
    }
    reader.readAsDataURL(this.files[0]);
    $('#uploadimage').show();
  });
  $('.crop_image').click(function(event){
    $image_crop.croppie('result', {
      type: 'canvas',
      size: 'viewport'
    }).then(function(response){
      $.ajax({
        url:"upload.php",
        type: "POST",
        data:{"image": response},
        success:function(data)
        {
           $('#uploaded_image').html(data)
        }
      });
    })
  });
}); 
</script>
upload.php
?
1
2
3
4
5
6
7
8
9
10
11
12
13
//upload.php
<?php
if(isset($_POST["image"]))
{
 $data = $_POST["image"];
 $image_array_1 = explode(";", $data);
 $image_array_2 = explode(",", $image_array_1[1]);
 $data = base64_decode($image_array_2[1]);
 $imageName = time() . '.png';
 file_put_contents($imageName, $data);
 echo '<img src="'.$imageName.'" class="img-thumbnail" />';
}
?>

Posted by ednalan at 7:40 PM . Under , .

Related Post