Facebook style cover image reposition in php jquery
Facebook style cover image reposition in php jquery : In this post we are going to explain the functionality implemented just like facbook style cover image repostion in php and jquery.
Jquery Ui : Jquery ui is used to enable the draggable functionality for the selected image.
Php : We are using php on sever side to resize and crop the image on co-ordinates provided. Co-ordinates are passed to the server selected by the user.
Jquery Ui Draggable : Provides the draggable functionality on element. Event is triggered when we move mouse on the
element ie image in this case.
Jquery Function used for draggable functionality.
Facebook style cover image in PHP with Syntax
Jquery Ui : Draggable
function initUi(){
$(function(){
$(".coverimage").css('cursor','s-resize');
var y1 = $('.imagecontainer').height();
var y2 = $('.coverimage').height();
$(".coverimage").draggable({
scroll: false,
axis: "y",
drag: function(event, ui) {
if(ui.position.top >= 0)
{
ui.position.top = 0;
}
else if(ui.position.top <= y1 - y2)
{
ui.position.top = y1 - y2;
}
},
stop: function(event, ui) {
//####
$("#top").val(ui.position.top);
}
});
});
}
|
Main page with above code and main layout : index.php
Javascript Code to handle the drag and save event.
<?php session_start(); ?>
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Facebook Style Image Reposition using PHP and jQuery</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<style>
.repositionButton {
-moz-box-shadow:inset 0px 1px 0px 0px #7a8eb9;
-webkit-box-shadow:inset 0px 1px 0px 0px #7a8eb9;
box-shadow:inset 0px 1px 0px 0px #7a8eb9;
background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #637aad), color-stop(1, #5972a7));
background:-moz-linear-gradient(top, #637aad 5%, #5972a7 100%);
background:-webkit-linear-gradient(top, #637aad 5%, #5972a7 100%);
background:-o-linear-gradient(top, #637aad 5%, #5972a7 100%);
background:-ms-linear-gradient(top, #637aad 5%, #5972a7 100%);
background:linear-gradient(to bottom, #637aad 5%, #5972a7 100%);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#637aad', endColorstr='#5972a7',GradientType=0);
background-color:#637aad;
border:1px solid #314179;
display:inline-block;
cursor:pointer;
color:#ffffff;
font-family:Arial;
font-size:13px;
font-weight:bold;
padding:6px 12px;
text-decoration:none;
}
.repositionButton:hover {
background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #5972a7), color-stop(1, #637aad));
background:-moz-linear-gradient(top, #5972a7 5%, #637aad 100%);
background:-webkit-linear-gradient(top, #5972a7 5%, #637aad 100%);
background:-o-linear-gradient(top, #5972a7 5%, #637aad 100%);
background:-ms-linear-gradient(top, #5972a7 5%, #637aad 100%);
background:linear-gradient(to bottom, #5972a7 5%, #637aad 100%);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#5972a7', endColorstr='#637aad',GradientType=0);
background-color:#5972a7;
}
.repositionButton:active {
position:relative;
top:1px;
}
.saveButton {
-moz-box-shadow:inset 0px 1px 0px 0px #7a8eb9;
-webkit-box-shadow:inset 0px 1px 0px 0px #7a8eb9;
box-shadow:inset 0px 1px 0px 0px #7a8eb9;
background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #637aad), color-stop(1, #5972a7));
background:-moz-linear-gradient(top, #637aad 5%, #5972a7 100%);
background:-webkit-linear-gradient(top, #637aad 5%, #5972a7 100%);
background:-o-linear-gradient(top, #637aad 5%, #5972a7 100%);
background:-ms-linear-gradient(top, #637aad 5%, #5972a7 100%);
background:linear-gradient(to bottom, #637aad 5%, #5972a7 100%);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#637aad', endColorstr='#5972a7',GradientType=0);
background-color:#637aad;
border:1px solid #314179;
display:inline-block;
cursor:pointer;
color:#ffffff;
font-family:Arial;
font-size:13px;
font-weight:bold;
padding:6px 12px;
text-decoration:none;
}
.saveButton:hover {
background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #5972a7), color-stop(1, #637aad));
background:-moz-linear-gradient(top, #5972a7 5%, #637aad 100%);
background:-webkit-linear-gradient(top, #5972a7 5%, #637aad 100%);
background:-o-linear-gradient(top, #5972a7 5%, #637aad 100%);
background:-ms-linear-gradient(top, #5972a7 5%, #637aad 100%);
background:linear-gradient(to bottom, #5972a7 5%, #637aad 100%);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#5972a7', endColorstr='#637aad',GradientType=0);
background-color:#5972a7;
}
.saveButton:active {
position:relative;
top:1px;
}
</style>
<script>
function initUi(){
$(function(){
$(".coverimage").css('cursor','s-resize');
var y1 = $('.imagecontainer').height();
var y2 = $('.coverimage').height();
$(".coverimage").draggable({
scroll: false,
axis: "y",
drag: function(event, ui) {
if(ui.position.top >= 0)
{
ui.position.top = 0;
}
else if(ui.position.top <= y1 - y2)
{
ui.position.top = y1 - y2;
}
},
stop: function(event, ui) {
//####
$("#top").val(ui.position.top);
}
});
});
}
$(document).ready(function(){
initUi();
$("#savecover").click(function(){
var topa = $("#top").val();
$.post("crop.php?top="+topa, function(data, status){
alert("Saved");
$(".imagecontainer").html(data);
});
});
$("#reposition").click(function(){
$(".imagecontainer").html('<img style="position: absolute;" class="coverimage ui-corner-all" src="original/original.jpg?tp="'+Date.now()+'>');
initUi();
});
});
</script>
</head>
<body>
<div style="width:900px;margin:0 auto;">
<input type="hidden" id="top" value="">
<div class="imagecontainer" style="overflow: hidden; position: relative; width: 900px; height: 300px; border: 1px solid #888;">
<?php
if(!empty($_SESSION['thumb_uploaded']))
{
$image = 'thumb/'.$_SESSION['thumb_uploaded'];
}else{
$image = 'original/original.jpg';
}
?>
<img style="position: absolute;" class="coverimage ui-corner-all" src="<?=$image;?>" />
</div>
<div style="position:absolute;margin-left:50px;margin-top:-100px;width:200px;">
<img style="position: absolute;" src="original/profile.PNG" />
</div>
<div style="float:right;margin-top:-90px;padding:10px;position:relative;">
<button type="button" id="reposition" class="repositionButton">Reposition </button>
<button type="button" id="savecover" class="saveButton">Save </button>
</div>
</div>
</body>
</html>
|
PHP Code On Server Side : functions.php
Php code to Resize And Crop the image to Fit on container
<?php
/**script developed at www.tutorialsplane.com
written by Anil Web blogger.
**/
function imageResize($src, $dst, $width, $height){
if(!list($w, $h) = getimagesize($src)) return "Unsupported picture type!";
$type = strtolower(substr(strrchr($src,"."),1));
if($type == 'jpeg') $type = 'jpg';
switch($type){
case 'bmp': $img = imagecreatefromwbmp($src); break;
case 'gif': $img = imagecreatefromgif($src); break;
case 'jpg': $img = imagecreatefromjpeg($src); break;
case 'png': $img = imagecreatefrompng($src); break;
default : return "Unsupported picture type!";
}
if($w < $width and $h < $height) return "Picture is too small!";
// $ratio = min($width/$w, $height/$h);
// $width = $w * $ratio;
// $height = $h * $ratio;
if ($w > $h) {
$imageHeight = floor(($h/$w)*$width);
$imageWidth = $width;
} else {
$imageWidth = floor(($w/$h)*$height);
$imageHeight = $height;
}
$x = 0;
$new = imagecreatetruecolor($imageWidth, $imageHeight);
// preserve transparency
if($type == "gif" or $type == "png"){
imagecolortransparent($new, imagecolorallocatealpha($new, 0, 0, 0, 127));
imagealphablending($new, false);
imagesavealpha($new, true);
}
imagecopyresampled($new, $img, 0, 0, $x, 0, $imageWidth, $imageHeight, $w, $h);
switch($type){
case 'bmp': imagewbmp($new, $dst); break;
case 'gif': imagegif($new, $dst); break;
case 'jpg': imagejpeg($new, $dst); break;
case 'png': imagepng($new, $dst); break;
}
return true;
}
function crop($source,$destination,$destinationWidth,$destinationHeight,$x1,$y1){
if(!list($w, $h) = getimagesize($source)) return "Unsupported picture type!";
$type = strtolower(substr(strrchr($source,"."),1));
if($type == 'jpeg') $type = 'jpg';
switch($type){
case 'bmp': $copy = imagecreatefromwbmp($source); break;
case 'gif': $copy = imagecreatefromgif($source); break;
case 'jpg': $copy = imagecreatefromjpeg($source); break;
case 'png': $copy = imagecreatefrompng($source); break;
default : return "Unsupported picture type!";
}
// this is taken because of maintaining the aspect ratio for the croping to the exact height and width.
$w = $destinationWidth;
$h = $destinationHeight;
$new = imagecreatetruecolor($destinationWidth, $destinationHeight);
imagecopyresampled($new, $copy, 0, 0, $x1, $y1, $destinationWidth, $destinationHeight, $w, $h);
switch($type){
case 'bmp': imagewbmp($new, $destination); break;
case 'gif': imagegif($new, $destination); break;
case 'jpg': imagejpeg($new, $destination); break;
case 'png': imagepng($new, $destination); break;
}
return true;
}
?>
|
Main crop.php handling the complete server process :
Javascript Code to handle the drag and save event.
<?php
session_start();
include('functions.php');
$src = "original.jpg";
$source = "original/".$src;
$type = strtolower(substr(strrchr($source,"."),1));
$new_image_name = 'image_' . date('Y-m-d-H-i-s') . '_' . uniqid() . ".".$type;
$destination = "thumb/".$new_image_name;
$destinationWidth = 900;
$destinationHeight = 300;
$top = abs($_REQUEST['top']);
$x1 = 0;
$y1 = $top;
$destinationResize = $source;
imageResize($source, $destinationResize,900,300);
crop($source,$destination,$destinationWidth,$destinationHeight,$x1,$y1);
$_SESSION['thumb_uploaded'] = $new_image_name;
echo '<img style="position: absolute;" class="coverimage ui-corner-all" src="thumb/'.$new_image_name.'">';
?>
|
Advertisements
