I have this script that makes thumbnails out of regular size images. I m trying to add a field to it so I can rename the thumbnail before it gets uploaded. Please help. Thank you <?php /* * Copyright (c) 2008 http://www.webmotionuk.com * "PHP & Jquery image upload & crop" * Date: 2008-05-15 * Ver 1.0 * Redistributions of source code must retain the above copyright notice, this list of conditions and the following disclaimer. * Redistributions in binary form must reproduce the above copyright notice, this list of conditions and the following disclaimer in the documentation and/or other materials provided with the distribution. * * THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND * ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED * WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. * IN NO EVENT SHALL THE COPYRIGHT OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, * INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, * PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, * STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF * THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. * * http://www.opensource.org/licenses/bsd-license.php */ //Constants //You can alter these options $upload_dir = "upload_pic"; // The directory for the images to be saved in $upload_path = $upload_dir."/"; // The path to where the image will be saved $large_image_name = "resized_pic.jpg"; // New name of the large image $thumb_image_name = 'pic_name'; // New name of the thumbnail image $max_file = "1148576"; // Approx 1MB $max_width = "500"; // Max width allowed for the large image $thumb_width = "200"; // Width of thumbnail image $thumb_height = "200"; // Height of thumbnail image //Image functions //You do not need to alter these functions function resizeImage($image,$width,$height,$scale) { $newImageWidth = ceil($width * $scale); $newImageHeight = ceil($height * $scale); $newImage = imagecreatetruecolor($newImageWidth,$newImageHeight); $source = imagecreatefromjpeg($image); imagecopyresampled($newImage,$source,0,0,0,0,$newImageWidth,$newImageHeight,$width,$height); imagejpeg($newImage,$image,90); chmod($image, 0777); return $image; } //You do not need to alter these functions function resizeThumbnailImage($thumb_image_name, $image, $width, $height, $start_width, $start_height, $scale){ $newImageWidth = ceil($width * $scale); $newImageHeight = ceil($height * $scale); $newImage = imagecreatetruecolor($newImageWidth,$newImageHeight); $source = imagecreatefromjpeg($image); imagecopyresampled($newImage,$source,0,0,$start_width,$start_height,$newImageWidth,$newImageHeight,$width,$height); imagejpeg($newImage,$thumb_image_name,90); chmod($thumb_image_name, 0777); return $thumb_image_name; } //You do not need to alter these functions function getHeight($image) { $sizes = getimagesize($image); $height = $sizes[1]; return $height; } //You do not need to alter these functions function getWidth($image) { $sizes = getimagesize($image); $width = $sizes[0]; return $width; } //Image Locations $large_image_location = $upload_path.$large_image_name; $thumb_image_location = $upload_path.$thumb_image_name; //Create the upload directory with the right permissions if it doesn't exist if(!is_dir($upload_dir)){ mkdir($upload_dir, 0777); chmod($upload_dir, 0777); } //Check to see if any images with the same names already exist if (file_exists($large_image_location)){ if(file_exists($thumb_image_location)){ $thumb_photo_exists = "<img src=\"".$upload_path.$thumb_image_name."\" alt=\"Thumbnail Image\"/>"; }else{ $thumb_photo_exists = ""; } $large_photo_exists = "<img src=\"".$upload_path.$large_image_name."\" alt=\"Large Image\"/>"; } else { $large_photo_exists = ""; $thumb_photo_exists = ""; } if (isset($_POST["upload"])) { //Get the file information $userfile_name = $_FILES['image']['name']; $userfile_tmp = $_FILES['image']['tmp_name']; $userfile_size = $_FILES['image']['size']; $filename = basename($_FILES['image']['name']); $file_ext = substr($filename, strrpos($filename, '.') + 1); //Only process if the file is a JPG and below the allowed limit if((!empty($_FILES["image"])) && ($_FILES['image']['error'] == 0)) { if (($file_ext!="jpg") && ($userfile_size > $max_file)) { $error= "ONLY jpeg images under 1MB are accepted for upload"; } }else{ $error= "Select a jpeg image for upload"; } //Everything is ok, so we can upload the image. if (strlen($error)==0){ if (isset($_FILES['image']['name'])){ move_uploaded_file($userfile_tmp, $large_image_location); chmod($large_image_location, 0777); $width = getWidth($large_image_location); $height = getHeight($large_image_location); //Scale the image if it is greater than the width set above if ($width > $max_width){ $scale = $max_width/$width; $uploaded = resizeImage($large_image_location,$width,$height,$scale); }else{ $scale = 1; $uploaded = resizeImage($large_image_location,$width,$height,$scale); } //Delete the thumbnail file so the user can create a new one if (file_exists($thumb_image_location)) { unlink($thumb_image_location); } } //Refresh the page to show the new uploaded image header("location:".$_SERVER["PHP_SELF"]); exit(); } } if (isset($_POST["upload_thumbnail"]) && strlen($large_photo_exists)>0) { //Get the new coordinates to crop the image. $x1 = $_POST["x1"]; $y1 = $_POST["y1"]; $x2 = $_POST["x2"]; $y2 = $_POST["y2"]; $w = $_POST["w"]; $h = $_POST["h"]; //Scale the image to the thumb_width set above $scale = $thumb_width/$w; $cropped = resizeThumbnailImage($thumb_image_location, $large_image_location,$w,$h,$x1,$y1,$scale); //Reload the page again to view the thumbnail header("location:".$_SERVER["PHP_SELF"]); exit(); } if ($_GET['a']=="delete"){ if (file_exists($large_image_location)) { unlink($large_image_location); } if (file_exists($thumb_image_location)) { unlink($thumb_image_location); } header("location:".$_SERVER["PHP_SELF"]); exit(); } ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>WebMotionUK - PHP & Jquery image upload & crop</title> <script type="text/javascript" src="js/jquery-pack.js"></script> <script type="text/javascript" src="js/jquery.imgareaselect-0.3.min.js"></script> </head> <body> <!-- * Copyright (c) 2008 http://www.webmotionuk.com / http://www.webmotionuk.co.uk * Date: 2008-05-15 * Ver 1.0 * Redistributions of source code must retain the above copyright notice, this list of conditions and the following disclaimer. * Redistributions in binary form must reproduce the above copyright notice, this list of conditions and the following disclaimer in the documentation and/or other materials provided with the distribution. * * THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND * ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED * WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. * IN NO EVENT SHALL THE COPYRIGHT OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, * INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, * PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, * STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF * THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. * * http://www.opensource.org/licenses/bsd-license.php --> <ul> <li><a href="http://www.webmotionuk.co.uk/php-jquery-image-upload-and-crop/">Back to project page</a></li> <li><a href="http://www.webmotionuk.co.uk/jquery_upload_crop.zip">Download Files</a></li> </ul> <?php //Only display the javacript if an image has been uploaded if(strlen($large_photo_exists)>0){ $current_large_image_width = getWidth($large_image_location); $current_large_image_height = getHeight($large_image_location);?> <script type="text/javascript"> function preview(img, selection) { var scaleX = <?php echo $thumb_width;?> / selection.width; var scaleY = <?php echo $thumb_height;?> / selection.height; $('#thumbnail + div > img').css({ width: Math.round(scaleX * <?php echo $current_large_image_width;?>) + 'px', height: Math.round(scaleY * <?php echo $current_large_image_height;?>) + 'px', marginLeft: '-' + Math.round(scaleX * selection.x1) + 'px', marginTop: '-' + Math.round(scaleY * selection.y1) + 'px' }); $('#x1').val(selection.x1); $('#y1').val(selection.y1); $('#x2').val(selection.x2); $('#y2').val(selection.y2); $('#w').val(selection.width); $('#h').val(selection.height); } $(document).ready(function () { $('#save_thumb').click(function() { var x1 = $('#x1').val(); var y1 = $('#y1').val(); var x2 = $('#x2').val(); var y2 = $('#y2').val(); var w = $('#w').val(); var h = $('#h').val(); if(x1=="" || y1=="" || x2=="" || y2=="" || w=="" || h==""){ alert("You must make a selection first"); return false; }else{ return true; } }); }); $(window).load(function () { $('#thumbnail').imgAreaSelect({ aspectRatio: '1:1', onSelectChange: preview }); }); </script> <?php }?> <h1>Photo Upload and Crop</h1> <?php //Display error message if there are any if(strlen($error)>0){ echo "<ul><li><strong>Error!</strong></li><li>".$error."</li></ul>"; } if(strlen($large_photo_exists)>0 && strlen($thumb_photo_exists)>0){ echo "<p><strong>NOTE:</strong> If the thumbnail image looks the same as the previous one, just hit refresh a couple of times.</p>"; echo $large_photo_exists." ".$thumb_photo_exists; echo "<p><a href=\"".$_SERVER["PHP_SELF"]."?a=delete\">Delete Images</a></p>"; }else{ if(strlen($large_photo_exists)>0){?> <h2>Create Thumbnail</h2> <div align="center"> <img src="<?php echo $upload_path.$large_image_name;?>" style="float: left; margin-right: 10px;" id="thumbnail" alt="Create Thumbnail" /> <div style="float:left; position:relative; overflow:hidden; width:<?php echo $thumb_width;?>px; height:<?php echo $thumb_height;?>px;"> <img src="<?php echo $upload_path.$large_image_name;?>" style="position: relative;" alt="Thumbnail Preview" /> </div> <br style="clear:both;"/> <form name="thumbnail" action="<?php echo $_SERVER["PHP_SELF"];?>" method="post"> <input type="hidden" name="x1" value="" id="x1" /> <input type="hidden" name="y1" value="" id="y1" /> <input type="hidden" name="x2" value="" id="x2" /> <input type="hidden" name="y2" value="" id="y2" /> <input type="hidden" name="w" value="" id="w" /> <input type="hidden" name="h" value="" id="h" /> <td>Pic Name:</td> <td><input type="text" name="pic_name" /></td> </tr> <input type="submit" name="upload_thumbnail" value="Save Thumbnail" id="save_thumb" /> </form> </div> <hr /> <?php } ?> <h2>Upload Photo</h2> <form name="photo" enctype="multipart/form-data" action="<?php echo $_SERVER["PHP_SELF"];?>" method="post"> Photo <input type="file" name="image" size="30" /> <input type="submit" name="upload" value="Upload" /> </form> <?php } ?> <!-- Copyright (c) 2008 http://www.webmotionuk.com --> </body> </html> Code (markup):
Thank you for writing back. Where should I add that? Do I need to remove anything? Also, on line 70 I add this <td>Pic Name:</td> <td><input type="text" name="pic_name" /></td> </tr>
Won't you still be storing large images on your server ? Even if re-sizing images for display they're still causing lag due to large original file size. You can set a height/width image size in the upload process so it stores the large files at least to manageable sizes. In case you have users uploading from a camera image of 1200 x 950 etc