随心的博客

好记性不如个烂笔头，随心记录！

返回顶部

图片裁剪-demo

下面是一个图片裁剪的实例，也是根据网上的代码进行修改的，不过全部自己动手过了一遍，确保没问题的哦

 

执行逻辑为：

在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; width: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; width:760px;"><h1>裁剪预览：</h1><div id="preview"></div></div>
45     
46     <div style="margin:5px auto; width:760px;"><img src="<?php  echo $upload_pic ?>" id="opic"/></div>
47     <div style="margin:5px auto; width: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>
View Code

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 ?>
View Code

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 ?>
View Code

 

 

posted @ 2013-07-04 18:03  yangphp  阅读(577)  评论(0)  编辑  收藏  举报