PHP JQuery Crop And Resize Image Before Upload Using Croppie Plugin

PHP jQuery crop and resize image before upload using croppie plugin

In this post we will give you information about PHP jQuery crop and resize image before upload using croppie plugin. Hear we will give you detail about PHP jQuery crop and resize image before upload using croppie pluginAnd how to use it also give you demo for it if it is necessary.

PHP jQuery crop and resize image before upload using croppie plugin

In this PHP tutorial, we are going to crop an image using jQuery Croppie plugin and upload the image via Ajax request in PHP.

In most of the application nowadays, there is a need to upload just the thumbnail of the image rather than the whole image or you want to crop your image. Most of the social media platforms, provide you the feature to crop your image before you upload it on their platform.

In this tutorial, you are going to learn the same thing using Croppie plugin. It has a huge list of options that you can apply to your image like you can crop your image in circle or square, you can remove the outer parts of the images and many more.

This is common requirement in all modern web applications where you upload the images, crop the images as required for profile picture or media galleries as thumbnail.

croppie.html

In this step, I will create a HTML file “croppie.html” and include the required library for this example.

In this HTML file, I will have a input file type field and scripts that will crop and send to the server using ajax request.

<htmllang="en">
<head>
  <title>PHP and jQuery - Crop Image and Upload using Croppie plugin</title>
   <linkrel="stylesheet"href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/css/bootstrap.min.css">
  <linkrel="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>

  <metaname="csrf-token"content="{{ csrf_token() }}">
</head>

<body>
<divclass="container">
  <divclass="card"style="max-height: 500px;">
    <divclass="card-header bg-info">PHP and jQuery - Crop Image and Upload using Croppie plugin</div>
    <divclass="card-body">

      <divclass="row">
        <divclass="col-md-4 text-center">
        <divid="upload-demo"></div>
        </div>
        <divclass="col-md-4"style="padding:5%;">
        <strong>Select image to crop:</strong>
        <inputtype="file"id="image">

        <buttonclass="btn btn-success btn-block btn-upload-image"style="margin-top:2%">Upload Image</button>
        </div>

        <divclass="col-md-4">
        <divid="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:'circle'//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[]);
});


$('.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>

croppie.php

Now I will create a PHP file “croppie.php” to move the cropped images into a folder, so create a “uploads” folder.

<?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';

?>

Laravel PHP – Cropping and uploading an image with Croppie plugin using jQuery Ajax

PHP image upload and resize it before uploading tutorial

Show Demo

Label :

PHP

File

HTML

jQuery

How To

Web Development

JavaScript

Hope this code and post will helped you for implement PHP jQuery crop and resize image before upload using croppie plugin. if you need any help or any feedback give it in comment section or you have good idea about this post you can give it comment section. Your comment will help us for help you more and improve us. we will give you this type of more interesting post in featured also so, For more interesting post and code Keep reading our blogs

For More Info See :: laravel And github

PHP jQuery crop and resize image before upload using croppie plugin

PHP jQuery crop and resize image before upload using croppie plugin

Label :

Leave a Comment Cancel Reply