Hello,
This is a very nice script for imagecropping, but “drag image” function seems to work only in I.E
Can anybody figure out why?
To crop an image using php follow the below code.
…
First create a t
// cropper.php
<?php
session_start();
$default_max_width = 640;
$default_max_height = 480;
$cropped_width = 120;
$cropped_height = 120;
$unique_session_key = ‘imgcropper’;
define(‘TEMP_DIR’,‘temp/’);
$default_image = ‘default.jpg’;
$border_background = ‘screen.gif’;
function storeImage($img_id)
{
$_SESSION[‘imgcropper’][‘cropped’] = imgdata($img_id);
}
$redirect_after_crop = ‘done.php’;
include(“cropper-include.php”);
?>
…
//cropper-include.php
<?php
if(isset($_GET[‘showimg’]))
{
header(“Content-Type: image/gif”);
echo $_SESSION[$unique_session_key][‘lowres’];
die();
}
$photoerr = false;
if(isset($_FILES[‘photo’]))
{
$img = imagecreatefromgif($_FILES[‘photo’][‘tmp_name’]);
if($img==“”)
{
$photoerr = true;
}
else
{
$sizedata = getimagesize($_FILES[‘photo’][‘tmp_name’]);
$orig_w = $sizedata[0];
$orig_h = $sizedata[1];
$full_w = min($default_max_width, $orig_w);
$full_h = round(($full_w/$orig_w)$orig_h);
if($full_h > $default_max_height)
{
$full_h = $default_max_height;
$full_w = round(($full_h/$orig_h)$orig_w);
}
$full = imagecreatetruecolor($full_w, $full_h);
imagecopyresized($full, $img, 0, 0, 0, 0, $full_w, $full_h, $orig_w, $orig_h);
$_SESSION[$unique_session_key][‘full’] = imgdata($img);
$_SESSION[$unique_session_key][‘lowres’] = imgdata($full);
}
}
if(isset($_POST[‘top’]) && isset($_POST[‘left’]) && isset($_POST[‘width’]) && isset($_POST[‘height’]))
{
do { $tempfile = rand(1,10000); } while(file_exists(TEMP_DIR.$tempfile));
$fp = fopen(TEMP_DIR.$tempfile, ‘wb’);
fwrite($fp, $_SESSION[$unique_session_key][‘full’]);
fclose($fp);
$sizedata = getimagesize(TEMP_DIR.$tempfile);
$orig_w = $sizedata[0];
$orig_h = $sizedata[1];
$img = imagecreatefromgif(TEMP_DIR.$tempfile);
$full_w = intval($_POST[‘width’]);
$full_h = intval($_POST[‘height’]);
$full = imagecreatetruecolor($full_w, $full_h);
imagecopyresized($full, $img, 0, 0, 0, 0, $full_w, $full_h, $orig_w, $orig_h);
$final = imagecreatetruecolor($cropped_width, $cropped_height);
imagecopy($final, $full, 0, 0, -1*(intval($_POST[‘left’])-$_POST[‘divwidth’]), -1*(intval($_POST[‘top’])-$_POST[‘divwidth’]), $cropped_width, $cropped_height);
storeImage($final);
unlink(TEMP_DIR.$tempfile);
header(“Location: $redirect_after_crop”);
}
if(!isset($_SESSION[$unique_session_key][‘full’]))
{
$_SESSION[$unique_session_key][‘full’] = file_get_contents($default_image);
$_SESSION[$unique_session_key][‘lowres’] = file_get_contents($default_image);
}
function imgdata($imgid)
{
do{ $filename = TEMP_DIR.rand(1,10000); } while(file_exists($filename));
imagegif($imgid, $filename);
$data = file_get_contents($filename);
unlink($filename);
return $data;
}
?>
<html>
<head>
<title>Header Image Uploader</title>
<style type=“text/css”>
div#*{ width:<?php echo $cropped_width;?>; height:<?php echo $cropped_height;?>; border:1px solid #ff0000; position:absolute; margin:150px auto auto 150px; z-index:2}
div#udlr {/* left: 10px; top: 10px;/ text-align: center; background: transparent; }
div#form { left: 0px; top: <?php echo $cropped_height+200; ?>px; height: 150px;
width: <?php echo $cropped_width+200; ?>px; text-align: center; }
div#saveform { left: <?php echo $cropped_width+50; ?>px; top: 10px; background: transparent; }
img#dragimg { cursor: move; position:relative; z-index: 1; }
</style>
<script type=“text/javascript” src=“imgRotateCanvas.js”></script>
<script language=“JavaScript”>
var dragging = false;
var x,y,dx,dy;
var theImg;
var aspectRatio = -1;
var top = 0;
var left = 0;
document.onmousemove = function(e)
{
if(aspectRatio==-1) init();
if(dragging)
{
theE = e ? e : window.event;
left = theE.clientX - dx;
top = theE.clientY - dy;
theImg.style.left = left + “px”;
theImg.style.top = top + “px”;
document.getElementById(“top”).value = top;
document.getElementById(“left”).value = left;
}
return false;
}
function mouseUp(e)
{
if(aspectRatio==-1) init();
dragging = false;
}
function init()
{
theImg = document.getElementById(“dragimg”);
document.getElementById(“top”).value = top;
document.getElementById(“left”).value = left;
document.getElementById(“width”).value = theImg.width;
document.getElementById(“height”).value = theImg.height;
aspectRatio = (theImg.height1000) / theImg.width;
theImg.onmousedown = function(e)
{
theE = e ? e : window.event;
dragging = true;
dx = theE.clientX - left;
dy = theE.clientY - top;
return false;
}
}
function shrink()
{
if(aspectRatio==-1) init();
theImg.width = theImg.width * 0.9;
theImg.height = (theImg.width * aspectRatio) / 1000;
document.getElementById(“width”).value = theImg.width;
document.getElementById(“height”).value = theImg.height;
}
function grow()
{
if(aspectRatio==-1) init();
theImg.width = theImg.width * 1.1;
theImg.height = (theImg.width * aspectRatio) / 1000;
document.getElementById(“width”).value = theImg.width;
document.getElementById(“height”).value = theImg.height;
}
function up()
{
if(aspectRatio==-1) init();
top -= 10; theImg.style.top = top+“px”;
document.getElementById(“top”).value = top;
}
function down()
{
if(aspectRatio==-1) init();
top += 10; theImg.style.top = top+“px”;
document.getElementById(“top”).value = top;
}
function mleft()
{
if(aspectRatio==-1) init();
left -= 10; theImg.style.left = left+“px”;
document.getElementById(“left”).value = left;
}
function right()
{
if(aspectRatio==-1) init();
left += 10; theImg.style.left = left+“px”;
document.getElementById(“left”).value = left;
}
</script>
</head>
<body bgcolor=“#fff” onmouseup=“mouseUp()”>
<p>rotate:
<input type=“button” value=“0°” onClick=“rotate(0);”>
<input type=“button” value=“90°” onClick=“rotate(90);”>
<input type=“button” value=“180°” onClick=“rotate(180);”>
<input type=“button” value=“-90°” onClick=“rotate(-90);”></p>
<div id=“*”></div>
<div style=“overflow:hidden; width:500px; height:400px; border:2px solid #00FF00;”>
<img src=“<?php echo $_SERVER[‘PHP_SELF’]; ?>?showimg=1” id=“dragimg” />
<canvas id=“canvas”></canvas>
</div>
<div class=“ontop” id=“udlr”>
<a href=“javascript:shrink();”><img src=“header_shrink.jpg” alt=“Shrink” border=“0” /></a>
<a href=“javascript:grow();”><img src=“header_grow.jpg” alt=“Grow” border=“0” /></a>
</div>
<div class=“ontop” id=“saveform”>
<form method=“POST” action=“<?php echo $_SERVER[‘PHP_SELF’]; ?>”>
<input type=“hidden” id=“top” name=“top” value=“-1” />
<input type=“hidden” id=“left” name=“left” value=“-1” />
<input type=“hidden” id=“width” name=“width” value=“-1” />
<input type=“hidden” id=“height” name=“height” value=“-1” />
<input type=“hidden” id=“divwidth” name=“divwidth” value=“150” />
<input type=“hidden” id=“divheight” name=“divheight” value=“150” />
<input type=“submit” value=“Save and Crop” />
</form>
</div>
<form method=“POST” action=“<?php echo $_SERVER[‘PHP_SELF’]; ?>” enctype=“multipart/form-data”>
Upload new photo: <input type=“file” name=“photo” />
<input type=“submit” value=“Upload” />
</form>
</body>
</html>
…
//done.php
<?php
if(isset($_GET[‘img’]))
{
session_start();
header(“Content-Type: image/jpeg”);
echo $_SESSION[‘imgcropper’][‘cropped’];
die();
header(‘location:cropper.php’);
}
?>
<html>
<head>
<title>Image Cropper</title>
</head>
<body>
<p>Here is your cropped image:</p>
<img src=“done.php?img=1” />
</body>
</html>