PHP Crop Image Before Upload using Croppie JS Example

By Hardik Savani June 13, 2023 Category : PHP Javascript Bootstrap jQuery

we mostly need to crop image before upload and as specially when we save image for user profile or etc. In this post i tell you how to crop image and save using jquery ajax.

In this example i use croppie plugin that provide to crop image with zoom and etc. croppie.js plugin is very professional that way we can easily use for crop profile image.

Bellow example through you can implement easily with php and jquery. It is pretty simple example for upload crop and save image php using croppie.js plugin.

You have to create two file and one upload directory for store crop image like as bellow:

index.php

ajaxpro.php

upload(Directory)

here is example for php upload profile picture crop.

So, let's see example and demo too.

Preview:

index.php

<html lang="en">
<head>
    <title>PHP - jquery ajax crop image before upload using croppie plugins</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/croppie/2.6.5/croppie.min.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/croppie/2.6.5/croppie.css" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.0/css/bootstrap.min.css" />
</head>
<body>
  
<div class="container">
    <div class="panel panel-default">
      <div class="panel-heading">Image Upluad</div>
      <div class="panel-body">
  
          <div class="row">
              <div class="col-md-4 text-center">
                <div id="upload-demo" style="width:350px"></div>
              </div>
              <div class="col-md-4" style="padding-top:30px;">
                <strong>Select Image:</strong>
                <br/>
                <input type="file" id="upload">
                <br/>
                <button class="btn btn-success upload-result">Upload Image</button>
              </div>
              <div class="col-md-4" style="">
                <div id="upload-demo-i" style="background:#e1e1e1;width:300px;padding:30px;height:300px;margin-top:30px"></div>
              </div>
          </div>
   
      </div>
    </div>
</div>

<script type="text/javascript">
$uploadCrop = $('#upload-demo').croppie({
    enableExif: true,
    viewport: {
        width: 200,
        height: 200,
        type: 'circle'
    },
    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: "/ajaxpro.php",
            type: "POST",
            data: {"image":resp},
            success: function (data) {
                html = '<img src="' + resp + '" />';
                $("#upload-demo-i").html(html);
            }
        });
    });
});
  
</script>
  
</body>
</html>

ajaxpro.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 'done';
  
?>

Run PHP App:

All the required steps have been done, now you have to type the given below command and hit enter to run the PHP app:

php -S localhost:8000

Now, Go to your web browser, type the given URL and view the app output:

Read Also: PHP JQuery Ajax Post Request Example
http://localhost:8000/index.php

I hope it can help you...

you can get more information about croppie.js plugin from here : Click Here.

Watch Online Video:

Tags :

We are Recommending you

Popular Posts

Categories

Latest Posts