Jump to content

adding a boarder to an image in PHP?

Mouse

By Mouse
in PHP Coding Help

 Share

Recommended Posts

Mouse Member

Mouse

Posted
Posted
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/php-image-uploader-and-manipulator.html
BUT image manipulation in PHP is not really my area, 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 PHP to do the same as this bit of CSS
[code]
.frame {
  float:left;
  border:solid 1px silver;
  padding:5px;
  margin-right:10px;
  }
[/code]
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>

[/code]
Link to comment
Share on other sites
This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to topic listing
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.