利用jquery Jcrop和 php实现截图功能

来源:岁月联盟 编辑:exp 时间:2012-09-21

项目中用到了一个上传头像的功能,需要进行无刷新的图片上传,并对上传后的图片进行用户要求的截图,无刷新上传我就不说了,用的Juploader,相信大家并不陌生,重点讲一下jcron和php配置实现图片的截取的功能,好了,言归正传。首先介绍一下jcron的用法,我就不一一解释了,我们只看最经常用的到截图功能:
[javascript] 
<span style="font-size: 18px; ">$(function(){ 
 
 
                $('#cropbox').Jcrop({ 
                    aspectRatio: 1, 
                    onSelect: updateCoords 
                }); 
 
 
            });</span> 

以上是控制,对哪个图片进行截图,“cropbox”是你要截取的img对象的id,“aspectRatio”控制等比例截取,“onSelect”的值是一个方法名,在选取时调用的方法
,个参数详情解释如下:
Option Name Value Type Description Default
aspectRatio decimal Aspect ratio of w/h (e.g. 1 for square) n/a
minSize array [ w, h ] Minimum width/height, use 0 for unbounded dimension n/a
maxSize array [ w, h ] Maximum width/height, use 0 for unbounded dimension n/a
setSelect array [ x, y, x2, y2 ] Set an initial selection area n/a
bgColor color value Set color of background container 'black'
bgOpacity decimal 0 - 1 Opacity of outer image when cropping .6选取时的回调方法
[javascript] view plaincopyprint?
<span style="font-size:18px;">function updateCoords(c) 
            { 
                $('#x').val(c.x); 
                $('#y').val(c.y); 
                $('#w').val(c.w); 
                $('#h').val(c.h); 
            };</span> 

有了这个方法,可以在你截图是更新隐藏域中的坐标值,通过隐藏域把坐标信息传到后台。
[html] 
<span style="font-size:18px;"><form action="crop.php" method="post" onsubmit="return checkCoords();"> 
            <input type="hidden" id="x" name="x" /> 
            <input type="hidden" id="y" name="y" /> 
            <input type="hidden" id="w" name="w" /> 
            <input type="hidden" id="h" name="h" /> 
            <input type="submit" value="Crop Image" /> 
        </form></span> 

ok,到此,前台已经告一段落,我们看后台的php代码。
后台php主要是根据前台传递的坐标,对原图进行截取,支持jpg,png,和gif三种图片格式,当然,你可以扩展他,使他支持更多的图片格式。
[php]
<span style="font-size:18px;">class Img_shot 

     
    private $filename; 
    private $ext; 
    private $x; 
    private $y; 
    private $x1; 
    private $y1; 
    private $width = 124; 
    private $height = 124; 
    private $jpeg_quality = 90; 
    /**
     * 构造器
     *
     * 
     */ 
    public function __construct() 
    { 
        log_message('debug', "Img_shot Class Initialized"); 
    } 
    /**
     * 初始化截图对象
     *@param filename 源文件路径全明
     *@param width  截图的宽
     *@param height  截图的高
     *@param x  横坐标1
     *@param y  纵坐标1
     *@param x1  横坐标1
     *@param y1  横坐标2
     * 
     */ 
    public function initialize($filename,$x,$y,$x1,$y1) 
    { 
        if(file_exists($filename)) 
        { 
            $this->filename = $filename; 
            $pathinfo = pathinfo($filename); 
            $this->ext = $pathinfo['extension']; 
        } 
        else 
        { 
            $e = new Exception('the file is not exists!',1050); 
            throw $e; 
        } 
        $this->x = $x; 
        $this->y = $y;    
        $this->x1 = $x1;  
        $this->y1 = $y1;  
    } 
    /**
     * 生成截图
     * 根据图片的格式,生成不同的截图
     */ 
    public function generate_shot() 
    { 
        switch($this->ext) 
        { 
            case 'jpg': 
                return $this->generate_jpg(); 
                break; 
            case 'png': 
                return $this->generate_png(); 
                break; 
            case 'gif': 
                return $this->generate_gif(); 
                break; 
            default: 
                return false; 
        } 
    } 
    /**
     * 得到生成的截图的文件名
     * 
     */ 
    private function get_shot_name() 
    { 
        $pathinfo = pathinfo($this->filename); 
        $fileinfo = explode('.',$pathinfo['basename']); 
        $filename = $fileinfo[0] . '_small.' . $this->ext; 
        return $pathinfo['dirname'] . '/' .$filename; 
    } 
    /**
     * 生成jpg格式的图片
     * 
     */ 
    private function generate_jpg() 
    { 
        $shot_name = $this->get_shot_name(); 
        $img_r = imagecreatefromjpeg($this->filename); 
        $dst_r = ImageCreateTrueColor($this->width, $this->height); 
 
        imagecopyresampled($dst_r,$img_r,0,0,$this->x,$this->y, 
        $this->width,$this->height,$this->x1,$this->y1); 
        imagejpeg($dst_r,$shot_name,$this->jpeg_quality); 
        return $shot_name; 
    } 
    /**
     * 生成gif格式的图片
     * 
     */ 
    private function generate_gif() 
    { 
        $shot_name = $this->get_shot_name(); 
        $img_r = imagecreatefromgif($this->filename); 
        $dst_r = ImageCreateTrueColor($this->width, $this->height); 
 
        imagecopyresampled($dst_r,$img_r,0,0,$this->x,$this->y, 
        $this->width,$this->height,$this->x1,$this->y1); 
        imagegif($dst_r,$shot_name); 
        return $shot_name; 
    } 
    /**
     * 生成png格式的图片
     * 
     */ 
    private function generate_png() 
    { 
        $shot_name = $this->get_shot_name(); 
        $img_r = imagecreatefrompng($this->filename); 
        $dst_r = ImageCreateTrueColor($this->width, $this->height); 
 
        imagecopyresampled($dst_r,$img_r,0,0,$this->x,$this->y, 
        $this->width,$this->height,$this->x1,$this->y1); 
        imagepng($dst_r,$shot_name); 
        return $shot_name; 
    } 
}       </span>