Site Admin
Site Admin Founder of MeaningArticles
661 Views

PHP Image Crop and Resize Using CropperJS

Hello Dev.

Today i will explained to the How To Image Crop and Resize Using CropperJS With PHP. This example is so easy to use in php. This example to i am upload to the image with cropperjs in php language.

This example to use us so easy. I am use few line php code and few line to js code and create to the example. This example to i am use in cropperjs in crop to the image.

So let's start to the example and follow to the my all step.

Example:

crop.php

<!DOCTYPE html>
<html>
  <head>
    <title>Image Crop and Resize Using CropperJS With PHP</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>        
    <link rel="stylesheet" href="https://unpkg.com/dropzone/dist/dropzone.css" />
    <link href="https://unpkg.com/cropperjs/dist/cropper.css" rel="stylesheet"/>
    <script src="https://unpkg.com/dropzone"></script>
    <script src="https://unpkg.com/cropperjs"></script>
    <link href="style.css" rel="stylesheet"/>
    <script src="script.js"></script>
  </head>
  <body>
    <div class="container" align="center">
      <br />
      <h3 align="center">Image Crop and Resize Using CropperJS With PHP</h3>
      <br />
      <div class="row">
        <div class="col-md-4"> </div>
        <div class="col-md-4">
          <div class="image_area">
            <form method="post">
              <label for="upload_image">
                <img src="images/image1.jpg" id="uploaded_image" class="img-responsive img-circle" />
                <div class="overlay">
                  <div class="text">Click To Change Image</div>
                </div>
                <input type="file" name="image" class="image" id="upload_image" style="display:none" />
              </label>
            </form>
          </div>
          </div>
        <div class="modal fade" id="modal" tabindex="-1" role="dialog" aria-labelledby="modalLabel" aria-hidden="true">
          <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
                <div class="modal-header">
                  <h5 class="modal-title">Crop Image Before Upload</h5>
                  <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                      <span aria-hidden="true">×</span>
                  </button>
                </div>
                <div class="modal-body">
                  <div class="img-container">
                      <div class="row">
                          <div class="col-md-8">
                              <img src="" id="sample_image" />
                          </div>
                          <div class="col-md-4">
                              <div class="preview"></div>
                          </div>
                      </div>
                  </div>
                </div>
                <div class="modal-footer">
                  <button type="button" id="crop" class="btn btn-primary">Crop</button>
                  <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
                </div>
            </div>
          </div>
      </div>      
    </div>
  </body>
</html>

style.css

.image_area {
  position: relative;
}

img {
    display: block;
    max-width: 100%;
}

.preview {
    overflow: hidden;
    width: 160px; 
    height: 160px;
    margin: 10px;
    border: 1px solid red;
}

.modal-lg{
    max-width: 1000px !important;
}

.overlay {
  position: absolute;
  bottom: 10px;
  left: 0;
  right: 0;
  background-color: rgba(255, 255, 255, 0.5);
  overflow: hidden;
  height: 0;
  transition: .5s ease;
  width: 100%;
}

.image_area:hover .overlay {
  height: 50%;
  cursor: pointer;
}

.text {
  color: #333;
  font-size: 20px;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  text-align: center;
}

script.js

$(document).ready(function(){
  
  var $modal = $('#modal');
  var image = document.getElementById('sample_image');
  var cropper;
  
  $('#upload_image').change(function(event){
    var files = event.target.files;
  
    var done = function(url){
      image.src = url;
      $modal.modal('show');
    };
  
    if(files && files.length > 0)
    {
      reader = new FileReader();
      reader.onload = function(event)
      {
        done(reader.result);
      };
      reader.readAsDataURL(files[0]);
    }
  });
  
  $modal.on('shown.bs.modal', function() {
    cropper = new Cropper(image, {
      aspectRatio: 1,
      viewMode: 3,
      preview:'.preview'
    });
  }).on('hidden.bs.modal', function(){
    cropper.destroy();
      cropper = null;
  });
  
  $('#crop').click(function(){
    canvas = cropper.getCroppedCanvas({
      width:400,
      height:400
    });
    
      canvas.toBlob(function(blob){
      url = URL.createObjectURL(blob);
      var reader = new FileReader();
      reader.readAsDataURL(blob);
      reader.onloadend = function(){
        var base64data = reader.result;
        $.ajax({
          url:'do_crop.php',
          method:'POST',
          data:{image:base64data},
          success:function(data)
          {
            $modal.modal('hide');
            $('#uploaded_image').attr('src', data);
          }
        });
      };
    });
  });
  
});

do_crop.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]);
  $image_name = 'images/' . time() . '.png';
  file_put_contents($image_name, $data);
  echo $image_name;
}

?>

i'm hoping it assist you to, thanks for visit my article if you like my article then proportion together with your friend and social platform.