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(); ??>
<meta charset="utf-8"/>
<title>Facebook Style Image Reposition using PHP and jQuery</title>
<div class="amp-wp-inline-81eaff9b40fa23dc4072e700dee0e82d">
<div class="imagecontainer amp-wp-inline-a4160f7c77520785815057001a50770f">
<?php if(!empty($_SESSION['thumb_uploaded']))
{
$image = 'thumb/'.$_SESSION['thumb_uploaded'];
}else{
$image = 'original/original.jpg';
}
??>
<amp-img class="coverimage ui-corner-all amp-wp-unknown-size amp-wp-enforced-sizes" src="<?=$image;?>" width="600" height="400" sizes="(min-width: 600px) 600px, 100vw"></amp-img>
</div>
<div class="amp-wp-inline-72a68854200dd99c6ec8e761133ed7db">
<amp-img src="original/profile.PNG" width="600" height="400" class="amp-wp-unknown-size amp-wp-enforced-sizes" sizes="(min-width: 600px) 600px, 100vw"></amp-img>
</div>
<div class="amp-wp-inline-e3f57988b05a5a5edc5baa7f7846eacd">
<button type="button" id="reposition" class="repositionButton">Reposition </button>
<button type="button" id="savecover" class="saveButton">Save </button>
</div>
</div>
|
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.'"?>';
?>
|