Crop photo using PHP and jQuery

Crop photo using PHP and jQuery

Give the possibility for users to upload photos dynamically is good, but users upload photos with different sizes, and usually that cause problem in the website design. So in this tutorial I’ll show you how to crop photo using PHP and jQuery. Don’t worry, it’s simple, just follow the tutorial step by step.

Download source code

This tutorial is based on the Jcrop plugin for jQuery.

1. Demontration

Step 1

Click on the button "Click to upload photo"

crop photo using php and jquery step 1

Step 2

Browse a photo, then click "Upload photo"

crop photo using php and jquery step 2

Step 3

The photo will be uploaded to the web server directory, and a dynamic popup containing the photo uploaded will appear with the crop tool, select the zone that you want and click "Crop image"

crop photo using php and jquery step 3

Step 4

This is the result

crop photo using php and jquery step 4

3. Files

index.php

This is the main file, it will be displayed on the first view. It contain a single button, and two hidden popups, one for the upload, and the other for the crop.

<!DOCTYPE html>
<html lang="en">
<head>
<title>Crop photo using PHP and jQuery</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="css/style.css" />
<link rel="stylesheet" href="css/jquery.Jcrop.min.css" type="text/css" />
<script type="text/javascript" src="js/jquery.min.js"></script>
<script src="js/jquery.Jcrop.min.js"></script>
<script type="text/javascript" src="js/script.js"></script>
</head>

<body>
    <div class="container">
        <div class="header">
            <img src="images/BeWebDeveloper.png" />
        </div><!-- header -->
        <h1 class="main_title">Crop photo using PHP and jQuery</h1>
        <div class="content">
            <span class="upload_btn" onclick="show_popup('popup_upload')">Click to upload photo</span>
            <div id="photo_container">
            </div>
        </div><!-- content -->    
        <div class="footer">
            Powered by <a href="http://www.bewebdeveloper.com">bewebdeveloper.com</a>
        </div><!-- footer -->
    </div><!-- container -->

    <!-- The popup for upload new photo -->
    <div id="popup_upload">
        <div class="form_upload">
            <span class="close" onclick="close_popup('popup_upload')">x</span>
            <h2>Upload photo</h2>
            <form action="upload_photo.php" method="post" enctype="multipart/form-data" target="upload_frame" onsubmit="submit_photo()">
                <input type="file" name="photo" id="photo" class="file_input">
                <div id="loading_progress"></div>
                <input type="submit" value="Upload photo" id="upload_btn">
            </form>
            <iframe name="upload_frame" class="upload_frame"></iframe>
        </div>
    </div>

    <!-- The popup for crop the uploaded photo -->
    <div id="popup_crop">
        <div class="form_crop">
            <span class="close" onclick="close_popup('popup_crop')">x</span>
            <h2>Crop photo</h2>
            <!-- This is the image we're attaching the crop to -->
            <img id="cropbox" />
            
            <!-- This is the form that our event handler fills -->
            <form>
                <input type="hidden" id="x" name="x" />
                <input type="hidden" id="y" name="y" />
                <input type="hidden" id="w" name="w" />
                <input type="hidden" id="h" name="h" />
                <input type="hidden" id="photo_url" name="photo_url" />
                <input type="button" value="Crop Image" id="crop_btn" onclick="crop_photo()" />
            </form>
        </div>
    </div>
</body>
</html>

upload_photo.php

This file will be executed when we click on the "upload photo" button, it uploads the photo on the "images" folder, I used the php function time() to make a unique name for the test, it could be the item ID in your case. After uploading the photo, the crop popup will appear by calling the javascript function show_popup_crop(url).

<?php
// get the tmp url
$photo_src = $_FILES['photo']['tmp_name'];
// test if the photo realy exists
if (is_file($photo_src)) {
	// photo path in our example
	$photo_dest = 'images/photo_'.time().'.jpg';
	// copy the photo from the tmp path to our path
	copy($photo_src, $photo_dest);
	// call the show_popup_crop function in JavaScript to display the crop popup
	echo '<script type="text/javascript">window.top.window.show_popup_crop("'.$photo_dest.'")</script>';
}
?>

crop_photo.php

This file will be executed when we click on the "Crop photo" button. The crop operation will be here.

<?php
// Target siz
$targ_w = $_POST['targ_w'];
$targ_h = $_POST['targ_h'];
// quality
$jpeg_quality = 90;
// photo path
$src = $_POST['photo_url'];
// create new jpeg image based on the target sizes
$img_r = imagecreatefromjpeg($src);
$dst_r = ImageCreateTrueColor( $targ_w, $targ_h );
// crop photo
imagecopyresampled($dst_r,$img_r,0,0,$_POST['x'],$_POST['y'], $targ_w,$targ_h,$_POST['w'],$_POST['h']);
// create the physical photo
imagejpeg($dst_r,$src,$jpeg_quality);
// display the  photo - "?time()" to force refresh by the browser
echo '<img src="'.$src.'?'.time().'">';
exit;
?>

script.js

This is the JavaScript file

// the target size
var TARGET_W = 600;
var TARGET_H = 300;

// show loader while uploading photo
function submit_photo() {
	// display the loading texte
	$('#loading_progress').html('<img src="images/loader.gif"> Uploading your photo...');
}

// show_popup : show the popup
function show_popup(id) {
	// show the popup
	$('#'+id).show();
}

// close_popup : close the popup
function close_popup(id) {
	// hide the popup
	$('#'+id).hide();
}

// show_popup_crop : show the crop popup
function show_popup_crop(url) {
	// change the photo source
	$('#cropbox').attr('src', url);
	// destroy the Jcrop object to create a new one
	try {
		jcrop_api.destroy();
	} catch (e) {
		// object not defined
	}
	// Initialize the Jcrop using the TARGET_W and TARGET_H that initialized before
    $('#cropbox').Jcrop({
      aspectRatio: TARGET_W / TARGET_H,
      setSelect:   [ 100, 100, TARGET_W, TARGET_H ],
      onSelect: updateCoords
    },function(){
        jcrop_api = this;
    });

    // store the current uploaded photo url in a hidden input to use it later
	$('#photo_url').val(url);
	// hide and reset the upload popup
	$('#popup_upload').hide();
	$('#loading_progress').html('');
	$('#photo').val('');

	// show the crop popup
	$('#popup_crop').show();
}

// crop_photo : 
function crop_photo() {
	var x_ = $('#x').val();
	var y_ = $('#y').val();
	var w_ = $('#w').val();
	var h_ = $('#h').val();
	var photo_url_ = $('#photo_url').val();

	// hide thecrop  popup
	$('#popup_crop').hide();

	// display the loading texte
	$('#photo_container').html('<img src="images/loader.gif"> Processing...');
	// crop photo with a php file using ajax call
	$.ajax({
		url: 'crop_photo.php',
		type: 'POST',
		data: {x:x_, y:y_, w:w_, h:h_, photo_url:photo_url_, targ_w:TARGET_W, targ_h:TARGET_H},
		success:function(data){
			// display the croped photo
			$('#photo_container').html(data);
		}
	});
}

// updateCoords : updates hidden input values after every crop selection
function updateCoords(c) {
	$('#x').val(c.x);
	$('#y').val(c.y);
	$('#w').val(c.w);
	$('#h').val(c.h);
}

style.css

This is the CSS file, it contain the design styles

* {
	margin: 0;
	padding: 0;
}
body {
	padding: 10px;
	background: #eaeaea;
	text-align: center;
	font-family: arial;
	font-size: 12px;
	color: #333333;
}
.container {
	width: 1000px;
	height: auto;
	background: #ffffff;
	border: 1px solid #cccccc;
	border-radius: 10px;
	margin: auto;
	text-align: left;
}
.header {
	padding: 10px;
}
.main_title {
	background: #cccccc;
	color: #ffffff;
	padding: 10px;
	font-size: 20px;
	line-height: 20px;
}
.content {
	padding: 50px 10px 10px 10px;
	min-height: 100px;
	text-align: center;
}
.upload_btn {
	background: #cccccc;
	color: #333333;
	border: 1px solid #999999;
	border-radius: 10px;
	font-size: 16px;
	line-height: 30px;
	font-weight: bold;
	display: inline-block;
	padding: 0 10px 0 10px;
	cursor: pointer;
}
#photo_container {
	padding: 50px 0 0 0;
}
.upload_btn:hover {
	background: #eaeaea;
}
/* footer --------------------------*/
.footer {
	padding: 10px;
	text-align: right;
}
.footer a {
	color: #999999;
	text-decoration: none;
}
.footer a:hover {
	text-decoration: underline;
}

/* popup --------------------------*/
#popup_upload,
#popup_crop {
	position: fixed;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	background: rgba(0, 0 ,0, 0.7);
	z-index: 99;
	text-align: center;
	display: none;
	overflow: auto;
}
.form_upload {
	width: 300px;
	height: 140px;
	border: 1px solid #999999;
	border-radius: 10px;
	background: #ffffff;
	color: #666666;
	margin: auto;
	margin-top: 160px;
	padding: 10px;
	text-align: left;
	position: relative;
}
.form_upload h2 {
	border-bottom: 1px solid #999999;
	padding: 0 0 5px 0;
	margin: 0 0 20px 0;
}
.upload_frame {
	width: 0;
	height: 0;
	display: none;
}
.file_input {
	width: 97%;
	background: #eaeaea;
	border: 1px solid #999999;
	border-radius: 5px;
	color: #333333;
	padding: 1%;
	margin: 0 0 20px 0;
}
#upload_btn {
	background: #cccccc;
	color: #333333;
	border: 1px solid #999999;
	border-radius: 10px;
	float: right;
	line-height: 20px;
	font-size: 14px;
	font-weight: bold;
	font-family: arial;
	display: block;
	padding: 5px;
	cursor: pointer;
}
#upload_btn:hover {
	background: #eaeaea;
}
.close {
    position: absolute;
    display: block;
    right: 10px;
    cursor: pointer;
    font-size: 20px;
    line-height: 16px;
    width: 18px;
    height: 18px;
    border: 1px solid #cccccc;
    border-radius: 5px;
    background: #F0F0F0;
    text-align: center;
    font-weight: bold;
}
.close:hover {
    background: #cccccc;
}
#loading_progress {
    float: left;
    line-height: 18px;
    padding: 8px 0 0 0;
}
#loading_progress img {
    float: left;
    margin: 0 5px 0 0;
    width: 16px !important;
}
.form_crop {
	width: auto;
	height: auto;
	display: inline-block;
	border: 1px solid #999999;
	border-radius: 10px;
	background: #ffffff;
	color: #666666;
	margin: auto;
	margin-top: 40px;
	padding: 10px;
	text-align: left;
	position: relative;
}
.form_crop h2 {
	border-bottom: 1px solid #999999;
	padding: 0 0 5px 0;
	margin: 0 0 20px 0;
}
#target {
	background-color: #ccc;
	width: 500px;
	height: 330px;
	font-size: 24px;
	display: block;
}
#crop_btn {
	background: #cccccc;
	color: #333333;
	border: 1px solid #999999;
	border-radius: 10px;
	float: right;
	line-height: 30px;
	font-size: 14px;
	font-weight: bold;
	font-family: arial;
	display: block;
	padding: 5px;
	margin: 10px 0 0 0;
	cursor: pointer;
}
#crop_btn:hover {
	background: #eaeaea;
}
Crop photo, JavaScript, jQuery, PHP
comments powered by Disqus

Social Profiles

bewebdeveloper on facebook bewebdeveloper on twitter bewebdeveloper on google plus bewebdeveloper on vk bewebdeveloper on youtube bewebdeveloper on tumblr bewebdeveloper rss

Subscribe to our Newsletter

Facebook

Twitter

Google+

HTML Tutorials
CSS Tutorials

Advertising