Today, We want to share with you .
In this post we will show you jquery image crop and upload, hear for jquery crop and resize image before upload we will give you demo and example for implement.
In this post, we will learn about crop and save image using jquery and php with an example.

PHP Upload and Crop Image using jQuery Ajax

Contents

There are the Following The simple About PHP Upload and Crop Image using jQuery Ajax Full Information With Example and source code.

As I will cover this Post with live Working example to develop , so the some major files and Directory structures for this example is following below.

index.php
image-crop.php
uploads – Directory
jquery.Jcrop.min.js
jquery.min
jquery.Jcrop.min

PHP Image Crop and Upload using JQuery

Step 1 : index.php




<title>PHP Upload and Crop Image using jQuery Ajax/title>





body {
    width: 550px;
    font-family: Arial;
}

.bgColor {
    width: 100%;
    height: 150px;
    background-color: #fff4be;
    border-radius: 4px;
    margin-bottom: 30px;
}

.inputFile {
    padding: 5px;
    background-color: #3d3d3d;
    border: #F0E8E0 1px solid;
    border-radius: 4px;
}

.btnSubmit {
    background-color: #696969;
    border-radius: 4px;
    border: #696969 1px solid;
    color: #3d3d3d;
    margin-top: 10px;
    padding: 5px 30px;
}

#profileFormLive {
    padding: 20px;
}

input#live_crop_img_source {
    background: lightseagreen;
    border: #485c61 1px solid;
    color: #FFF;
    padding: 5px 25px 5px 25px;
    visibility: hidden;
}

#live_img_crop {
    margin-top: 40px;
}




<div class="bgColor">
    <form id="uploadForm" action="" method="post" enctype="multipart/form-data">

        <div id="profileFormLive">
            <br> 

        </div>
    </form>
</div>
<div>
    <img src="" id="card_img_box" class="img" /><br />
</div>
<div id="btn">
    
</div>
<div>
    <img src="#" id="live_img_crop">
</div>
<!-- jQuery Based Jcrop Library Initialization to Enable Cropping Pakainfo.com -->

$(document).ready(function(){
    var pic_size;
    $('#card_img_box').Jcrop({
      aspectRatio: 1,
      onSelect: function(c){
       pic_size = {x:c.x,y:c.y,w:c.w,h:c.h};
       $("#live_crop_img_source").css("visibility", "visible");     
      }
    });
 
    $("#live_crop_img_source").click(function(){
        var img = $("#card_img_box").attr('src');
        $("#live_img_crop").show();
        $("#live_img_crop").attr('src','image-crop.php?x='+pic_size.x+'&y='+pic_size.y+'&w='+pic_size.w+'&h='+pic_size.h+'&img='+img);
    });
});

Upload and Crop Image using PHP

Step 2 : image-crop.php

Jquery image upload and crop for PHP – Output

PHP Upload and Crop Image using jQuery Ajax — upload-and-crop-image-using-php-and-jquery-output

My Paka Knowledgeable Ideas, Tips and Tricks, Useful Content, Jobs, Technology, Earn Money, gmail creation, skype, yahoo and more useful things.

Also Read This 👉 PHP Laravel delete files from Public Folder

Angular 6 CRUD Operations Application Tutorials

Angular 6 Example

Angular Latest My Previous Post With Source code Read more…..

Read :

Summary

You can also read about AngularJS, ASP.NET, VueJs, PHP.

I hope you get an idea about Jquery image upload and crop for PHP.
I would like to have feedback on my Pakainfo.com blog.
Your valuable feedback, question, or comments about this article are always welcome.
If you enjoyed and liked this post Example Source code, don’t forget to share.