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

最新推荐文章于 2021-03-11 09:39:23 发布

Garon_InE

最新推荐文章于 2021-03-11 09:39:23 发布

阅读量3.4k

点赞数 2

CC 4.0 BY-SA版权

分类专栏： php javascript 文章标签： Jcrop 上传头像截取头像

本文链接：https://blog.youkuaiyun.com/qq_22253823/article/details/46627765

php 同时被 2 个专栏收录

13 篇文章

订阅专栏

javascript

9 篇文章

订阅专栏

本文介绍了如何使用Jcrop，一个jQuery图片裁剪插件，来创建上传并截取头像的功能。Jcrop具备无侵入性、宽高比例锁定等特性，并提供了回调和API交互。文章通过一个Demo展示了如何整合Jcrop，包括PHP后台处理截图保存的文件目录结构以及视图、JS和控制器的代码结构。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

先来看看简单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 （视图）
这里写图片描述

视图代码croppic.php如下：

<?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">
                        <?php 
                        if(isset($_GET['name']))
                        {
                            echo'
                            <img src="/uppic/uppict/'.$_GET['name'].'"  id="target" class="float"/>
                            <img src="/uppic/uppict/'.$_GET['name'].'"  id="real_img" style="display:none;"/>
                            <div id="preview-pane">
                                <div class="preview-container">
                                    <img src="/uppic/uppict/'.$_GET['name'].'" class="jcrop-preview float" alt="Preview" />
                                </div>
                            </div>
                            ';
                        }
                        else
                        {
                            echo'
                            <img src="/uppic/uppict/default.jpg"  id="target" class="float"/>
                            <img src="/uppic/uppict/default.jpg"  id="real_img" style="display:none;"/>
                            <div id="preview-pane">
                                <div class="preview-container">
                                    <img src="/uppic/uppict/default.jpg" class="jcrop-preview float" alt="Preview" />
                                </div>
                            </div>
                            ';
                        }

                        ?>

                    </div>
                    <form action="http://<?php echo $_SERVER['HTTP_HOST'];?>/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>
                    <?php 
                    if(isset($_GET['name']))
                    {
                        echo '
                        <form action="http://'.$_SERVER['HTTP_HOST'].'/uppic/controller/croppic.php?mothed=crop&name='.$_GET['name'].'" method="post" onsubmit="return checkCoords();">
                        ';
                    }
                    else
                    {
                        echo '
                        <form action="http://'.$_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如下：

<?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 '<img src="../userpic/'.$name.'" />';

    exit;
}

?>