php+jquery插件imgAreaSelect图片裁剪保存

背景：项目中需要在原来提供的搜索图片基础上，进行裁剪后还可以接着搜索的功能。

首先：因为之前没做过这类需求，所以先谷歌百度了下php裁剪图片关键字。得到了一个关键方法imagecopy()，这个方法可以实现，获取图片文件指定区域的内容。按照函数的主要参数要求，需要截取起始点的x，y坐标，截取内容的宽度，截取内容的高度。由此，开始考虑怎么获取这些参数。

第二步：接着谷歌百度了下js图片裁剪，知道了jquery插件imgAreaSelect，然后就开始结合着资料coding代码了。

第三步：coding代码的时候，无疑是先前台js块的应用，保证能获取到我想要的信息(这部分的思路是：在最初的搜索图片下面放上一个按钮，点击后，给指定的图片初始话裁剪区域；之后第二步，开始选择裁剪区域，并将选择后的信息写入到form表单的隐藏域中；最后再放入一个按钮，点击时提交存储了信息的form表单)。

第四步：php代码处理前端提交过来的form表单信息。

// 裁剪图片处理
$("#cutImgBtn").click(function(){
    // 设置初始裁剪框信息
    var init_x1 = 25;
    var init_y1 = 20;
    var init_x2 = 185;
    var init_y2 = 210;
    
    // 将裁剪后的区域图片信息写入到form表单中
    writeAreaInfoToform(25, 20, 185, 210);
    
    // 设置图片上的裁剪区域处理
    $('#search_img_source').imgAreaSelect({
        selectionColor: '', x1:25, y1:20, x2: 185, y2:210,//初始位置
        handles: true,
        onSelectEnd: function (img, selection) {
            writeAreaInfoToform(selection.x1, selection.y1, selection.width, selection.height);
        }
    });
});

// 选好裁剪图片区域后提交查询
$("#cutImgSubmitBtn").click(function(){
    if ($("#img_cut_init_x").val() != undefined && $("#img_cut_init_x").val() != "")
    {
        $("#cutimgsearch").submit();
    }
    
});

// 将选择的区域图片信息写入到form表单的参数中，便于提交搜索
function writeAreaInfoToform(img_cut_init_x,img_cut_init_y,img_cut_width,img_cut_height)
{
    $("#img_search_type").val("cutsearch");
    $("#img_cut_init_x").val(img_cut_init_x);
    $("#img_cut_init_y").val(img_cut_init_y);
    $("#img_cut_width").val(img_cut_width);
    $("#img_cut_height").val(img_cut_height);
    $("#init_img_source").val($("#search_img_source").attr("src"));
}

// 将上传的搜索图片写入到项目指定的文件目录内
        if (isset($_POST['img_search_type']) && $_POST['img_search_type'] == "cutsearch")
        {
            // 获取原始图片路径，便于页面展示
            $search_img_source = $_POST['init_img_source'];
            
            // 获取裁剪信息，调用区域图片生成的方法
            if (file_exists(ROOT_PATH.$search_img_source))
            {
                $this->assign('search_img_source', basename($search_img_source));
                $cut_info = array();
                $cut_info['init_img_source'] = $search_img_source;
                $cut_info['img_cut_init_x'] = $_POST['img_cut_init_x'];
                $cut_info['img_cut_init_y'] = $_POST['img_cut_init_y'];
                $cut_info['img_cut_width'] = $_POST['img_cut_width'];
                $cut_info['img_cut_height'] = $_POST['img_cut_height'];
                $search_img_name = SolrSearch::save_cut_img($cut_info);
            }
            else 
            {
                trigger_error("被裁剪的原始图片已经超过存储时间被清除！");
            }
        }

public static function save_cut_img($cut_info)
    {
        // 获取被裁剪的原始图片信息
        $src = ROOT_PATH.$cut_info['init_img_source'];
        $init_img_info = getimagesize($src);
        
        // 按照图片的类型创建不同的对象
        switch ($init_img_info[2])
        {
            case 1:
                $im = imagecreatefromgif($src);
                break;
            case 2:              
                $im = imagecreatefromjpeg($src);
                break;
            case 3:
                $im = imagecreatefrompng($src);
                break;
            default:
                trigger_error("Cannot process this picture format: " .$data['mime']);
                return ;
                break;
        }
        unset($data);
        
        $ni = imagecreatetruecolor($cut_info['img_cut_width'],$cut_info['img_cut_height']);
        imagecopy($ni, $im, 0, 0, $cut_info['img_cut_init_x'], $cut_info['img_cut_init_y'], $cut_info['img_cut_width'], $cut_info['img_cut_height']);
        
        // 设置裁剪后生成的新图片文件名    日期+随机4位数+".文件后缀名"
        $cut_file_name = dirname(ROOT_PATH.$cut_info['init_img_source'])."/cut_";
        $cut_file_name .= gmdate("YmdHis", gmtime()+3600*8);
        $cut_file_name .= mt_rand(1000, 9999);
        
        // 按照图片的类型将不同的对象创建成对应的文件
        switch ($init_img_info[2])
        {
            case 1:
                $cut_file_name .= ".gif";
                imagegif($ni, $cut_file_name);
                break;
            case 2:
                $cut_file_name .= ".jpg";
                imagejpeg($ni, $cut_file_name, 75);
                break;
            case 3:
                $cut_file_name .= ".png";
                imagepng($ni, $cut_file_name);
                break;
            default:
                trigger_error("Cannot process this picture format: " .$data['mime']);
                return ;
                break;
        }
        return $cut_file_name;
    }

备注：php端的代码中，应用到了一些img处理的函数，正常情况初版本是可以调通。但后期的一些异常情况，应该是需要注意的。

    前端代码中，主要是在设置图片的初始裁剪区域时，有时候会样式错乱，因为自己的前端能力不是很强。可能会在后期转给前端的同事去。

另：附上插件的详细地址http://odyniec.net/projects/imgareaselect/