i recently found a great script that allows users on my site to upload and crop their member photo, i have modified the GREAT script which i found at
http://da.vidnicholson.com/2006/10/p...nipulator.html
BUT JavaScript is not really my language, so i have a question. Can i adapt this script to add a boarder to the finished image in a permanent way as i could with CSS in a temporary way?
i.e. can i use JS to do the same as this bit of CSS
Code:
.frame {
float:left;
border:solid 1px silver;
padding:5px;
margin-right:10px;
}
and here is the full JS / PHP /HTML file
Code:
<?php
// handle requests for temporary low-res image:
if(isset($_GET['showimg']))
{
header("Content-Type: image/jpeg");
echo $_SESSION[$unique_session_key]['lowres'];
die();
}
// handle photo uploads:
$photoerr = false;
if(isset($_FILES['photo']))
{
$img = imagecreatefromjpeg($_FILES['photo']['tmp_name']);
if($img=="")
{
// bad image uploaded
$photoerr = true;
}
else
{
$sizedata = getimagesize($_FILES['photo']['tmp_name']);
// original dimensions:
$orig_w = $sizedata[0];
$orig_h = $sizedata[1];
// low-res image dimensions:
$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);
}
// create resized image:
$full = imagecreatetruecolor($full_w, $full_h);
imagecopyresized($full, $img, 0, 0, 0, 0, $full_w, $full_h, $orig_w, $orig_h);
// store in Session:
$_SESSION[$unique_session_key]['full'] = imgdata($img);
$_SESSION[$unique_session_key]['lowres'] = imgdata($full);
}
}
// handle crop requests:
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 = imagecreatefromjpeg(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'])-250), -1*(intval($_POST['top'])-160), $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));
imagejpeg($imgid, $filename);
$data = file_get_contents($filename);
unlink($filename);
return $data;
}
?>
<html>
<head>
<title>Photo Uploader</title>
<style type="text/css">
div.fadebox { background: transparent url(<?php echo $border_background; ?>) center repeat;
position: absolute; z-index: 2; }
div.ontop { background: #a0d9ff; position: absolute; z-index: 3; }
div#fadebox1 { left: 0px; top: 0px; width: 250px; height: <?php echo $cropped_height+320; ?>px; }
div#fadebox2 { left: 249px; top: 0px; width: <?php echo $cropped_width; ?>px; height: 160px; }
div#fadebox3 { left: <?php echo $cropped_width+248; ?>px; top: 0px; width: 251px; height: <?php echo $cropped_height+320; ?>px; }
div#fadebox4 { left: 249px; top: <?php echo $cropped_height+160; ?>px; width: <?php echo $cropped_width; ?>px; height: 160px; }
div#udlr { left: 10px; top: 10px; text-align: center; background: transparent; }
div#form { left: 0px; top: <?php echo $cropped_height+320; ?>px; height: 150px;
width: <?php echo $cropped_width+500; ?>px; text-align: center; }
div#saveform { left: <?php echo $cropped_width+50; ?>px; top: 430px; background: transparent; }
img#dragimg { cursor: move; position: absolute; z-index: 1; top: 0px; left: 0px; }
.intro { font-family: Verdana, Arial, Helvetica, sans-serif; font-weight: bold; }
</style>
<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;
}
//document.onmousemove = window.onmousemove;
function mouseUp(e)
{
//alert("up");
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.height*1000) / 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="#000" onmouseup="mouseUp()">
<div class="ontop" id="udlr">
<a href="javascript:up();"><img src="header_up.jpg" alt="Up" border="0" /></a><br />
<a href="javascript:mleft();"><img src="header_left.jpg" alt="Left" border="0" /></a>
<a href="javascript:right();"><img src="header_right.jpg" alt="Right" border="0" /></a><br />
<a href="javascript:down();"><img src="header_down.jpg" alt="Down" border="0" /></a><br />
<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="form">
<?php if($photoerr) echo "<b>Error: The photo you attempted to upload was not a valid JPEG file.</b>"; ?>
<form method="POST" action="<?php echo $_SERVER['PHP_SELF']; ?>" enctype="multipart/form-data">
<br />
<span class="intro">Add your photo to your profile page:</span><br />
<input type="file" name="photo" />
<input type="submit" value="Upload your photo" />
</form>
</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="submit" value="Click HERE to crop and save your photo" />
</form>
</div>
<div id="fadebox1" class="fadebox"></div>
<div id="fadebox2" class="fadebox"></div>
<div id="fadebox3" class="fadebox"></div>
<div id="fadebox4" class="fadebox"></div>
<img src="<?php echo $_SERVER['PHP_SELF']; ?>?showimg=1" id="dragimg" />
</body>
</html>
__________________
Theres no place like 127.0.0.1
ok, here i go, my background is more in CSS, HTML, PhotoShop and Dreamweaver... but i am trying to learn the ins and outs of PHP... now for the rub i am dyslexic, so please bear with me.
currently working on:-
http://mouse.nodstrum.com
01-13-2007, 03:36 AM
looking to add a tweak to a third party script.
Linear Mode
