chevron_left
202 points
12 6 5

In this article I am going to demostrate the cropping of user’s image using a JQuery plugin named Croppie. After the cropping of image, I will demonstrate how to fetch the image data and upload it to your server using PHP. Let’s start.

1- Image Cropping Using Croppie Plugin

<html xmlns="http://www.w3.org/1999/xhtml">
	
	<head>

		<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0">

		<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
		<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/jquery-ui.min.js"></script>
    	<script src="https://foliotek.github.io/Croppie/croppie.js"></script>
        <script src="main.js"></script>
        <link href="croppie.css" type="text/css" rel="stylesheet">
	</head>

	<body>

		<div class="demo-wrap upload-demo">
			<div class="upload-msg">
			    <i class="flaticon-upload"></i> Upload a file to start cropping
			</div>
			<div class="upload-demo-wrap">
			    <div id="upload-demo"></div>
			</div>
			<a class="btn file-btn">
			    <i class="flaticon-upload"></i> <span>Upload a photo</span>
			    <input type="file" id="upload" value="Choose a file" accept="image/*" />
			</a>
			<div class="pro_img_con">
			    <div class="pro_bottom_but">
			        <button class="upload-result"><i class="flaticon-upload-1"></i> Save cropped picture</button>
			    </div>
			</div>
	    </div><br>
	</body>
</html>

Your main.js should look like this

           /* main.js */

           function popupResult(result) {
    		    
    		    var ImageURL = result.src;
    		    var formData = new FormData();
                formData.append('data', ImageURL);

                $.ajax({

                    url: '/upload-image.php',
                    type: 'POST',
                    data: formData,
                    contentType:false,
                    cache: false,
                    processData: false,
                    dataType: 'json',
                    success: function (response) {
                        if(response){
                            alert('Operation Successful');
                        }else{
                            alert('Operation Failed');
                        }
                    }
                });
    		}

    		var $uploadCrop;
    		function readCroppedFile(input) {
    		    if (input.files && input.files[0]) {
    		    	var reader = new FileReader();
	    		    reader.onload = function (e) {
	    		          $('.upload-demo').addClass('ready');
	    		          $uploadCrop.croppie('bind', {
	    		            url: e.target.result
	    		          }).then(function(){
	    		            console.log('jQuery bind complete');
	    		          });

	    		    }
    		        reader.readAsDataURL(input.files[0]);
    		    }
    		    else {
    		        swal("Sorry - you're browser doesn't support the FileReader API");
    		    }
    		}

    		$( document ).ready(function() {

    			$uploadCrop = $('#upload-demo').croppie({
    			    viewport: {
	    			    width: 300,
	    			    height: 160,
	    			    type: 'square'
    			    },
    			    enableExif: true,
    			    showZoomer: true,
    			});

    			$('#upload').on('change', function () { readCroppedFile(this); });
    			$('.upload-result').on('click', function (ev) {
    			    $uploadCrop.croppie('result', {
    			        type: 'canvas',
    			        size: 'viewport'
    			    }).then(function (resp) {
    			        popupResult({
    			          src: resp
    			        });
    			    });
    			});
    		});

Finally your croppie.css should look like this. Please note that the styles defined in this file are totally optional. They are just used to beautify some elements on the page like buttons and image container etc

/* croppie.css */

.btn button, a.btn {
    background-color: #392c70;
    color: white;
    padding: 8px 15px;
    border-radius: 3px;
    font-size: 13px;
    text-decoration: none;
    text-shadow: none;
    display: inline-block;
    cursor: pointer;
	font-family: 'SofiaPro-Light';
	margin-top: 45px;
}

.pro_bottom_but button{
    background-color: #922c88;
    color: white;
    padding:10px 15px;
    border-radius: 3px;
    font-size: 13px;
    text-decoration: none;
    text-shadow: none;
    display: inline-block;
    cursor: pointer;
	font-family: 'SofiaPro-Light';
	margin-top: 0px !important;
	border: 0px !important;
}

.pro_img_con{
	margin-top: 30px;
	border-top: 1px solid #e5ebf1;
	padding: 25px 0px 10px 30px;
	overflow: hidden;
}

input[type="file"] {
    cursor: pointer;
}
button:focus {
    outline: 0;
}

.file-btn {
    position: relative;
}
.file-btn input[type="file"] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
}

.actions {
    padding: 5px 0;
}
.actions button {
    margin-right: 5px;
}

pre[class*="language"] {
    margin: 10px 0;
    padding-top: 0;
    border-left-color: #189094;
}

.hero p {
    font-size: 16px;
}

.hero .grid {
    padding-top: 50px;
}

.demo-wrap {
/*    border-bottom: 1px solid #ddd;
    padding-top: 20px;*/
}

.demo-wrap .container {
    padding-bottom: 10px;
}

.demo-wrap strong {
    font-size: 16px;
    display: block;
    font-weight: 400;
    color: #aaa;
    margin: 0 0 5px 0;
}

.upload-demo .upload-demo-wrap,
.upload-demo .upload-result,
.upload-demo.ready .upload-msg {
    display: none;
}
.upload-demo.ready .upload-demo-wrap {
    display: block;
}
.upload-demo.ready .upload-result {
    display: inline-block;    
}
.upload-demo-wrap {
    width: 500px;
    height: 250px;
}

.upload-msg {
    text-align: center;
    padding: 70px 60px;
    font-size: 16px;
    color: #afb5bc;
    width: 500px;
    border: 0px solid #aaa;
	background-color: #e8edf3;
	border-radius: 6px;
	font-family: 'SofiaPro-Light';
}

/* Sweet alert modifications */
.sweet-alert {
    width: auto;
    max-width: 85%;
	display: none !important;
}

/* Grid - subset */
*, *:after, *:before {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
[class*='col-'] {
	float: left;
	padding-right: 20px; /* column-space */
}

.grid {
	width: 100%;
	max-width: 1140px;
	min-width: 755px;
	margin: 0 auto;
	overflow: hidden;
}
.grid:after {
	content: "";
	display: table;
	clear: both;
}

.col-1-2 {
	width: 50%;
}

.col-1-3 {
	width: 33.33%;
}
.col-2-3 {
	width: 66.66%;
}
.col-1-4 {
	width: 25%;
}
.col-3-4 {
	width: 75%;
}

@media handheld, only screen and (max-width: 767px) {
    .grid {
        width: 100%;
        min-width: 0;
        margin-left: 0;
        margin-right: 0;
        padding-left: 20px; /* grid-space to left */
        padding-right: 10px; /* grid-space to right: (grid-space-left - column-space) e.g. 20px-10px=10px */
    }

    [class*='col-'] {
        width: auto;
        float: none;
        margin: 10px 0;
        padding-left: 0;
        padding-right: 10px; /* column-space */
    }
    .container, 
    .section-header h2 {
        min-width: 0;
    }

    .croppie-container {
        padding: 30px 0;
    }
}

 2- Upload Cropped Image Using PHP

//upload-image.php

<?php
    if(isset($_GET["data"])){
        
        $imageData = base64_decode(preg_replace('#^data:image/\w+;base64,#i', '', $_GET["data"]));
        $fileName = rand(100000, 999999).'.png';
        file_put_contents($fileName, $imageData);
        return $fileName;
    }else{
        return false;
    }
?>

That’s all. Cheers

 

 

 

 

More Posts

multiple file upload with progress bar using jquery and php ahsanhanif99 - Sep 2
Automatic image slider in html css javascript ahsanhanif99 - Aug 21
How to create submenu in html using css with example ahsanhanif99 - Aug 26
How to pass the value from one html page to another using jQuery Tushar Shuvro - Apr 19, 2020
How to display image from database in PHP Tushar Shuvro - May 16, 2020
Web design with html, css, javascript and jquery Sanjana Sagar - Jun 17
How to increase height of input box in html ahsanhanif99 - Aug 21
How to change text color on mouseover in html ahsanhanif99 - Aug 20
Change nav background color on scroll css kunal verma - Nov 4, 2020
HTML code for popup window on page load kunal verma - Oct 31, 2020