下面是一个图片裁剪的实例，也是根据网上的代码进行修改的，不过全部自己动手过了一遍，确保没问题的哦
执行逻辑为：
在index.php 中选择一个图片点击上传，然后会提交到 upload.php 文件将这个图片上传到服务器，然后再通过url返回到index.php,并附加上新上传文件的名称
然后再index.php 通过js选择需要裁剪的位置，然后，通过imagecut.php 进行图片裁剪，最终会生成，一个原图，和一个裁剪图
index.php
1 <?php 2 $upload_pic = $_GET['upload_pic']; 3 empty($upload_pic)?$upload_pic="images/default.jpg":$upload_pic="images/".$upload_pic; 4 ?> 5 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 6 <html xmlns="http://www.w3.org/1999/xhtml"> 7 <head> 8 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 9 <title>javascript实现的选框裁剪图片</title> 10 <link href="style/common.css" type=text/css rel=stylesheet> 11 <script type="text/javascript" src="js/prototype.js"></script> 12 <script type="text/javascript" src="js/cropper/scriptaculous.js?load=builder,dragdrop"></script> 13 <script type="text/javascript" src="js/cropper/cropper.js"></script> 14 <script type="text/javascript"> 15 var position=new Array(); 16 function onEndCrop(opic){ 17 $('x1').value=position[0]=opic.x1; 18 $('y1').value=position[1]=opic.y1; 19 $('x2').value=position[2]=opic.x2; 20 $('y2').value=position[3]=opic.y2; 21 } 22 Event.observe(window,'load',function(){ 23 new Cropper.ImgWithPreview('opic',{minWidth:80,minHeight:80,ratioDim:{x:10,y:10},displayOnInit:true,onEndCrop:onEndCrop,previewWrap:'preview'}) 24 }); 25 </script> 26 </head> 27 <body> 28 <form action="upload.php" method="POST" enctype="multipart/form-data" > 29 <!--start of 图片上传--> 30 <div style="margin:5px auto; 760px;"> 31 <h1>图片上传：</h1> 32 <input type="file" name="upfile" > 33 <input type="submit" value="上传" /> 34 </div> 35 <!--end of 图片上传--> 36 </form> 37 38 <form action="imagecut.php" method="post" > 39 <!--图片裁剪 start--> 40 <input type="hidden" id="x1" name="x1" size="3" /> 41 <input type="hidden" id="y1" name="y1" size="3" /> 42 <input type="hidden" id="x2" name="x2" size="3" /> 43 <input type="hidden" id="y2" name="y2" size="3" /> 44 <div style="margin:5px auto; 760px;"><h1>裁剪预览：</h1><div id="preview"></div></div> 45 46 <div style="margin:5px auto; 760px;"><img src="<?php echo $upload_pic ?>" id="opic"/></div> 47 <div style="margin:5px auto; 760px;"> 48 <input type="hidden" name="source_pic" value="<?php echo $upload_pic?>"> 49 <input name="cropper" id="cropper" type="submit" class="button" value="进行裁剪"/> 50 </div> 51 <!--图片裁剪 end--> 52 </form> 53 </body> 54 </html>
upload.php
1 <?php 2 //进行判断 3 if (!isset($_FILES["upfile"]) || !is_uploaded_file($_FILES["upfile"]["tmp_name"]) || $_FILES["upfile"]["error"] != 0) { 4 echo "ERROR:invalid upload"; 5 exit(0); 6 } 7 8 $file_extension = pathinfo($_FILES['upfile']['name']); 9 $filepath = dirname(__FILE__)."/images/"; 10 $filename = "scource_".date("YmdHis",time()).".".$file_extension['extension']; 11 12 if (move_uploaded_file($_FILES['upfile']['tmp_name'],$filepath.$filename)) 13 { 14 15 echo "<script type='text/javascript'>window.location='index.php?upload_pic={$filename}'</script>"; 16 exit(); 17 } 18 else 19 { 20 echo "ERROR:invalid upload"; 21 exit(0); 22 } 23 24 ?>
imagecut.php
1 <?php 2 /** 3 * 图片裁剪 4 */ 5 // The file 6 $source_pic = @$_POST['source_pic']; 7 if (!empty($source_pic)) 8 { 9 $filename = $source_pic; 10 $pathRes = pathinfo($filename); 11 $newname = "thumb_".substr($pathRes['filename'],strpos($pathRes['filename'],"_")).".".$pathRes['extension']; 12 //header('Content-type: image/jpeg'); 13 // Get new dimensions 14 list($width, $height) = getimagesize($filename); 15 $new_width = $_POST['x2']-$_POST['x1']; 16 $new_height = $_POST['y2']-$_POST['y1']; 17 18 // Resample 19 $image_p = imagecreatetruecolor($new_width, $new_height); 20 $image = imagecreatefromjpeg($filename); 21 imagecopyresampled($image_p, $image, 0, 0, $_POST['x1'], $_POST['y1'], $new_width, $new_height, $new_width, $new_height); 22 // Output 23 imagejpeg($image_p,"images/".$newname, 100); 24 echo "<img src='images/$newname' />"; 25 exit(); 26 } 27 else 28 { 29 echo "<script type='text/javascript'>alert('源图像不能为空');window.location='index.php'</script>"; 30 exit(); 31 } 32 ?>
