jacque99 Posted November 3, 2010 Share Posted November 3, 2010 Hello everyone, In fact, I have a script that makes the crop image that works well, I'm stuck on the part of adding a text box to allow to name the image "thumb". I also ask if possible to remove the "PHP_SELF" script and divide it into several pages. Attached script [attachment deleted by admin] Quote Link to comment Share on other sites More sharing options...
jacque99 Posted November 4, 2010 Author Share Posted November 4, 2010 we can make : Enter the name of 'thumb_image_name' in a text box: <form name="photo" enctype="multipart/form-data" action="<?php echo $_SERVER["PHP_SELF"];?>" method="post"> Photo <input type="file" name="image" size="30" /> <br /><br /> Specify the name of 'thumb_image_name' <input type="text" name="thumb"><br /><br /> <input type="submit" name="upload" value="Upload" /><br /><br /> </form> After $thumb=$_POST['thumb']; $thumb_image_name = $thumb.".jpg"; Quote Link to comment Share on other sites More sharing options...
Pikachu2000 Posted November 4, 2010 Share Posted November 4, 2010 You aren't going to find many people willing to download a .zip file and open it. It would be better for you to just paste the code from each file inside of . . . BBCode tags. Quote Link to comment Share on other sites More sharing options...
jacque99 Posted November 4, 2010 Author Share Posted November 4, 2010 Here is my script, just create a folder 'upload_pic' and test <?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 = "thumbnail_pic.jpg"; // New name of the thumbnail image $thumb = $_POST["thumb"]; $thumb_image_name=$thumb.".jpg"; $max_file = "1148576"; // Approx 1MB $max_width = "500"; // Max width allowed for the large image $thumb_width = "100"; // Width of thumbnail image $thumb_height = "100"; // 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); //$thumb = $_POST["thumb"]; //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"]; $thumb = $_POST["thumb"]; //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="http://mestestes.eu/js/jquery-pack.js"></script> <script type="text/javascript" src="http://mestestes.eu/js/jquery.imgareaselect-0.3.min.js"></script> </head> <body> <?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" /> <input type="hidden" name="thumb" value="" id="thumb" /> <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" /> <br /><br /> Specify the name of 'thumb_image_name' <input type="text" name="thumb"><br /><br /> <input type="submit" name="upload" value="Upload" /><br /><br /> </form> <?php } ?> <!-- Copyright (c) 2008 http://www.webmotionuk.com --> </body> </html> Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.