PHP调整Jcrop截取的上传头像功能

php中文网

发布时间：2016-06-13 12:22:27

1585人浏览过

来源于php中文网

原创

PHP整合Jcrop截取的上传头像功能

先来看看简单demo效果图
这里写图片描述

Jcrop介绍

Jcrop是一个jQuery插件，它能为你的WEB应用程序快速简单地提供图片裁剪的功能。
特点：
1、对所有图片均unobtrusively（无侵入的，保持DOM简洁）
2、支持宽高比例锁定
3、支持 minSize / maxSize设置
4、支持改变选区或移动选区时的回调（Callback）
5、支持用键盘微调选区
6、通过API创建互动，比如动画效果
7、支持CSS样式

详细请自行百度jcrop

Demo介绍

这个Demo选择整合了jcrop的截取图片插件，
上传图片还是使用file表单提交，php后台处理截图保存。

模块目录如下：
├─controller （控制器）
├─uppict （上传图片暂存位置）
├─userpic （截图保存位置）
└─views （视图）
这里写图片描述

立即学习“PHP免费学习笔记（深入）”；

Songtell

Songtell是第一个人工智能生成的歌曲含义库

下载

视图代码croppic.php如下：

/*** 20150520 11:50* 作者：Ro* 修改时间 20150522 13:50* 修改内容 合并上传和截取图片功能*///上传文件类型列表$uptypes=array(    'image/jpg',    'image/jpeg',    'image/png'    );?><html><head>    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />    <link rel="stylesheet" href="css/main.css" type="text/css" />    <link rel="stylesheet" href="css/demos.css" type="text/css" />    <link rel="stylesheet" href="css/jquery.Jcrop.css" type="text/css" />    <link rel="stylesheet" href="css/uppic.css" type="text/css" />    <title>头像上传title>head><body>    <div class="container">        <div class="row">            <div class="span12">                <div class="jc-demo-box">                    <div class="clear_float">                                                 if(isset($_GET['name']))                        {                            echo'                            .$_GET['name'].'"  id="target" class="float"/>                            .$_GET['name'].'"  id="real_img"   style="max-width:90%"/>                                                                                                .$_GET['name'].'" class="jcrop-preview float" alt="Preview" />                                
                            
                            ';                        }                        else                        {                            echo'                                                                                                                                                                                        
                            
                            ';                        }                        ?>                    div>                    <form action="http:///uppic/controller/croppic.php?mothed=up" enctype="multipart/form-data" method="post" name="upform">                        上传文件:                        <input name="upfile" type="file">                        <input type="submit" value="上传图片" class="btn btn-large btn-inverse"><br>                        允许上传的文件类型为:=implode(', ',$uptypes)?>                    form>                                         if(isset($_GET['name']))                    {                        echo '                        $_SERVER['HTTP_HOST'].'/uppic/controller/croppic.php?mothed=crop&name='.$_GET['name'].'" method="post" onsubmit="return checkCoords();">                        ';                    }                    else                    {                        echo '                        $_SERVER['HTTP_HOST'].'/uppic/controller/croppic.php?mothed=crop&name=default.jpg" 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="保存" class="btn btn-large btn-inverse"/>                    form>                div>            div>        div>    div><script src="js/jquery.min.js">script><script src="js/jquery.Jcrop.js">script><script src="js/crop.js">script>body>html>

视图js代码crop.js如下：

/** * 20150518 15:35 * author : Ro * changeDate： 20150519 10:25 * changeContext：修改计算坐标算法 *//***检测是否有选取一个区域**/function checkCoords(){    if (parseInt($('#w').val()))       return true;    alert("请截取一个区域再提交保存！");    return false;};jQuery(function($){    var jcrop_api,        boundx,        boundy,    // Grab some information about the preview pane    $preview = $('#preview-pane'),    $pcnt = $('#preview-pane .preview-container'),    $pimg = $('#preview-pane .preview-container img'),    //这里获取的是装img的div宽高    xsize = $pcnt.width(),    ysize = $pcnt.height();    //这里可以设置jcrop的属性，    //如当改变截取区域时激活onChange: updatePreview动作等    $('#target').Jcrop({      onChange: updatePreview,      onSelect: updatePreview,      aspectRatio: xsize / ysize    },function(){      // 用jcrop的getBounds()方法获取真实尺寸      var bounds = this.getBounds();      boundx = bounds[0];      boundy = bounds[1];      // Store the API in the jcrop_api variable      jcrop_api = this;      // Move the preview into the jcrop container for css positioning      $preview.appendTo(jcrop_api.ui.holder);    });    //更新jcrop预览视图    function updatePreview(c)    {      if (parseInt(c.w) > 0)      {        //下面的比例是div的宽高与截图坐标比        var rx = xsize / c.w;        var ry = ysize / c.h;        //改变预览图的大小和显示位置        $pimg.css({          width: Math.round(rx * boundx) + 'px',          height: Math.round(ry * boundy) + 'px',          marginLeft: '-' + Math.round(rx * c.x) + 'px',          marginTop: '-' + Math.round(ry * c.y) + 'px'        });        var realWidth =  $("#real_img").width();        var realHeight = $("#real_img").height();    //记录位置和宽高        $('#x').val(Math.round( c.x * realWidth / boundx ));        $('#y').val(Math.round( c.y * realHeight / boundy));        $('#w').val(Math.round( c.w * realWidth / boundx ));        $('#h').val(Math.round( c.w * realWidth / boundx ));      }    };});

控制器代码croppic.php如下：

/** * 20150520 11:50 * 作者：Ro * 修改时间 20150522 13:50 * 修改内容 合并上传和截取图片功能 * 修改时间 20150527 15:23 * 修改内容 判断png和jpg而作对应操作 *//******************************************************************************参数说明:$max_file_size  : 上传文件大小限制, 单位BYTE$destination_folder : 上传文件路径使用说明:1. 将PHP.INI文件里面的"extension=php_gd2.dll"一行前面的;号去掉,因为我们要用到GD库;2. 将extension_dir =改为你的php_gd2.dll所在目录;******************************************************************************///上传文件类型列表$uptypes=array(    'image/jpg',    'image/jpeg',    'image/png'    );//上传文件大小限制, 单位BYTE$max_file_size=2000000;     //上传文件路径'../uppict/'$destination_folder="../uppict/"; //请求上传图片操作if ($_SERVER['REQUEST_METHOD'] == 'POST' && 'up'==$_GET['mothed']){    //是否存在文件    if (!is_uploaded_file($_FILES["upfile"]["tmp_name"]))    {       echo "图片不存在!";       exit;   }   $file = $_FILES["upfile"];    //检查文件大小   if($max_file_size < $file["size"])   {    echo "文件太大!";    exit;}    //检查文件类型if(!in_array($file["type"], $uptypes)){    echo "文件类型不符!".$file["type"];    exit;}if(!file_exists($destination_folder)){    mkdir($destination_folder);}    //获取信息$filename=$file["tmp_name"];$image_size = getimagesize($filename);$pinfo=pathinfo($file["name"]);$ftype=$pinfo['extension'];    //可以在这修改上传后图片的名字，这里以time()为命名$destination = $destination_folder.time().".".$ftype;    //检查是否已经存在同名文件if (file_exists($destination) && $overwrite != true){    echo "同名文件已经存在了";    exit;}    //上传图片操作if(!move_uploaded_file ($filename, $destination)){    echo "移动文件出错";    exit;}    //获取信息$pinfo=pathinfo($destination);$fname=$pinfo['basename'];    //重定向浏览器 header('Location: http://'.$_SERVER['HTTP_HOST'].'/uppic/views/croppic.php?name='.$fname);     //确保重定向后，后续代码不会被执行 exit;}//请求截图保存操作else if ($_SERVER['REQUEST_METHOD'] == 'POST' && 'crop'==$_GET['mothed']){    //获取图片名    $name=$_GET['name'];    //高宽    $targ_w = $targ_h = 150;    /**     *范围从 0（最差质量，文件更小）     *到 100（最佳质量，文件最大）。     *默认为 IJG 默认的质量值（大约 75）     */    $jpeg_quality = 90;    //图片暂放地址'../uppict/'    $src = "../uppict/".$_GET['name'];    //分开图片名和图片后缀    $arr_name = explode ( ".", $name );    //判断图片后缀选择新建图片方式    $img_r ='';    if ('png' == $arr_name [1])    {        $img_r = imagecreatefrompng ( $src );    } else    {        $img_r = imagecreatefromjpeg ( $src );    }    $dst_r = ImageCreateTrueColor( $targ_w, $targ_h );    //截取图片    imagecopyresampled($dst_r,$img_r,0,0,$_POST['x'],$_POST['y'],$targ_w,$targ_h,$_POST['w'],$_POST['h']);    //判断图片后缀选择生成图片    //保存位置'../userpic/'// 生成图片    if ('png' == $arr_name [1])    {        imagepng ( $dst_r, '../userpic/' . $name );    } else    {        imagejpeg ( $dst_r, '../userpic/' . $name, $jpeg_quality );    }    //显示保存后的图片    echo '.$name.'" />';    exit;}?>