Mouse Posted January 13, 2007 Share Posted January 13, 2007 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 More sharing options...
.josh Posted January 13, 2007 Share Posted January 13, 2007 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 Link to comment https://forums.phpfreaks.com/topic/34005-adding-a-boarder-to-an-image-in-php/#findComment-159849 Share on other sites More sharing options...
Mouse Posted January 13, 2007 Author Share Posted January 13, 2007 Ok, i get the principal... and have spent an hour playing but cant get it to intigrate.... Link to comment https://forums.phpfreaks.com/topic/34005-adding-a-boarder-to-an-image-in-php/#findComment-159908 Share on other sites More sharing options...
.josh Posted January 13, 2007 Share Posted January 13, 2007 post what you have so far. Link to comment https://forums.phpfreaks.com/topic/34005-adding-a-boarder-to-an-image-in-php/#findComment-159990 Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.