TP上传头像

THINKPHP+JS缩放图片式截图的实现

作者：杨鑫奇

原始链接：http://www.cnblogs.com/scotoma/archive/2010/03/05/1679477.html

 

声明

本博文转载请注明作者和出处，鄙视转载文章还删改内容的LJ，在TP论坛潜水很久了，光看不做点贡献是不行的，呵呵！在这里得到了老大和国的照顾，这段时间将原来的项目里面的一些值得分享的拿出来和大家一起分享了！希望多多各位指教！THINKPHP，I love you.

今晚TP论坛的一位大哥加我了，说也遇到这个方面的问题，呵呵!想想其实很多东西都遇到了，是不是应该分享出来呢？其实自己的很多东西都是别人那来的，取之于网络用之于网络！只有大家多分享，才能够提高！

 

实现方式

上传图片 -- 保存并显示图片 -- JS获取缩略图参数 -- 提交位置参数 -- 图片缩放保存类处理图片 -- 保存截取的图片--更新数据库 -- 跳转

 

上几张截图

以下是实例截图

 

 

 

 

主要的实现代码

 

1 public function cutimg()
2 {
3 $result = $this -> upload( ' temp ' );
4 if ( ! is_array ( $result ))
5 {
6 $this -> redirect( ' index ' );
7 }
8 else
9 {
10 $this -> assign( ' imgurl ' , ' __ROOT__/ ' . C( ' ATTACHDIR ' ) . ' /temp/ ' . $result [ 0 ][ ' savename ' ]);
11 $this -> assign( ' imgname ' , $result [ 0 ][ ' savename ' ]);
12 $this -> display();
13 }
14 }

 

 

 

 

1 public function setavatar()
2 {
3 if ( ! empty ( $_REQUEST [ ' cut_pos ' ]))
4 {
5 // import('ORG.Util.ImageResize');
6   require ( ' ImageResize.class.php ' );
7 $imgresize = new ImageResize();
8 // use the full path
9   $url = C( ' ATTACHDIR ' ) . ' /temp/ ' . trim ( $_POST [ ' imgname ' ]);
10 $imgresize -> load( $url );
11 dump( $url );
12 $posary = explode ( ' , ' , $_REQUEST [ ' cut_pos ' ]);
13 foreach ( $posary as $k => $v )
14
15 $posary [ $k ] = intval ( $v );
16
17 if ( $posary [ 2 ] > 0 && $posary [ 3 ] > 0 ) $imgresize -> resize( $posary [ 2 ] , $posary [ 3 ]);
18
19 dump( $posary );
20 // create filename rule
21   $uico = time () . ' .jpg ' ;
22 dump( $uico );
23 $path = C( ' AVATAR ' );
24 // save 120*120 image
25   $imgresize -> cut( 120 , 120 , intval ( $posary [ 0 ]) , intval ( $posary [ 1 ]));
26 $large = ' l_ ' . $uico ;
27 $imgresize -> save( $path . $large );
28
29 echo ' ' . __ROOT__ . ' / ' . $path . $large . ' " /> ' ;
30 // update database
31   }
32 else
33 {
34 // error reporting
35   }
36 }

 

 

源代码下载地址： 点击下载  其他的自己去完善了，运行需要TP框架请访问 http://www.thinkphp.cn 下载，然后下载扩展包，因为用到Upload类！

 

 

//------------------------------------------------------------------------------------------------

20100321更新

修改了图片 定位到中心 增加了用户体验功能，本功能有 阿粪 同学所写，在此表示感谢呵呵，还要感谢原来JS的作者

具体修改如下：

文件路径/tpl/default/index/cutimg.html

 

imageresize(flag) 函数内最后一行添加 rePosition();//新增 266行

grip_Drag(clientX, clientY) 函数内最后一行添加

文件尾部添加

 

//重新定位图片位置

function rePosition(){

cut_img.style.left = Math.round(divx/2 - (divx/2-oldMoveLeft)*zoom/oldzoom) + "px";

cut_img.style.top = Math.round((divy/2+oldMoveTop)*zoom/oldzoom - divy/2) + "px";

}