Jump to content

adding a boarder to an image in PHP?

Mouse

By Mouse
in PHP Coding Help

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
https://forums.phpfreaks.com/topic/34005-adding-a-boarder-to-an-image-in-php/
Share on other sites
.josh Advanced Member

.josh

Posted
Posted
not sure how "frilly" you are wanting to make your border, but you may wanna look into these GD library functions:

[url=http://www.php.net/imagecolorallocate]imagecolorallocate()[/url] for setting the color
[url=http://www.php.net/imagerectangle]imagerectangle()[/url] for making a rectangle

Archived

This topic is now archived and is closed to further replies.

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.