jQuery+PHP上传裁剪图片

下面是一个简单的jquery图片预览+裁剪的例子，原理是在前端获取要裁剪的信息，如宽高比、裁剪坐标，上传图片之后在后端php进行切割

jquery代码（必须在最后面引入）

        function showCutImg(showImg){

            var showImg = $(showImg);

            var changeInput = showImg.parents('.showImgDiv').siblings('.CutImage');

            var size = changeInput.siblings('.imgCoord').attr('ratio').split('*');

            var needWidth = size[0];

            var needHeight = size[1];

            var ratio = parseInt(needWidth)/parseInt(needHeight);

            ratio = parseFloat(ratio.toFixed(2));

            var thisFullDiv = showImg.parent();

            var coordArr = changeInput.siblings('.imgCoord').val().split(',');

            thisCutImgWidth = showImg.width();
            thisCutImgHeight = showImg.height()

            thisFullDiv.css('width',thisCutImgWidth);
            thisFullDiv.css('height',thisCutImgHeight);

            if((thisCutImgWidth/thisCutImgHeight)>=ratio){
                var thisCutDivHeight = thisCutImgHeight;
                var thisCutDivWidth = thisCutDivHeight*ratio;
            }else{
                var thisCutDivWidth = thisCutImgWidth;
                var thisCutDivHeight = thisCutDivWidth/ratio;
            }

            var hideWidth = (thisFullDiv.width()-thisCutDivWidth)/2;

            showImg.siblings('.hideImgLeft').width(hideWidth);
            showImg.siblings('.hideImgRight').width(hideWidth);

            var hideHeight = (thisFullDiv.height()-thisCutDivHeight)/2;

            showImg.siblings('.hideImgTop').width(thisCutDivWidth);
            showImg.siblings('.hideImgBottom').width(thisCutDivWidth);

            showImg.siblings('.hideImgTop').height(hideHeight);
            showImg.siblings('.hideImgBottom').height(hideHeight);

            if(hideWidth>0){
                var cutRatioX = thisCutImgWidth/hideWidth;
            }else{
                var cutRatioX = 0
            }

            if(hideHeight>0){
                var cutRatioY = thisCutImgHeight/hideHeight;
            }else{
                var cutRatioY = 0;
            }

            var coord = needWidth+'#'+needHeight+'#'+(cutRatioX)+'#'+(cutRatioY);

            if(coordArr!=''){
                coordArr.push(coord);
            }else{
                coordArr = [coord];
            }

            changeInput.siblings('.imgCoord').val(coordArr);
            $('.fullDiv').on('mousedown',function(e){
                var me = $(this);

                var changeInput = me.parent().siblings('.CutImage');

                var index = me.attr('index');

                var oldx = e.pageX;
                var oldy = e.pageY;

                var imgleft = me.children('.cutImg').position().left;
                var imgtop = me.children('.cutImg').position().top;

                var maxw = me.children('.hideImgLeft').width();
                var maxh = me.children('.hideImgTop').height();

                var goordArr = changeInput.siblings('.imgCoord').val().split(',');

                var cutDivSize = goordArr[index].split('#');

                $(document).mousemove(function(e){
                    var newx = e.pageX;
                    var newy = e.pageY;

                    var movex = newx - oldx;
                    var movey = newy - oldy;

                    var x = movex + imgleft;
                    var y = movey + imgtop;

                    if(Math.abs(x)>maxw){
                        if(x>0) x = maxw;
                        if(x<0) x = -maxw;
                    }

                    if(Math.abs(y)>maxh){
                        if(y>0) y = maxh;
                        if(y<0) y = -maxh;
                    }

                    me.children('.cutImg').css('left',x+'px');
                    me.children('.cutImg').css('top',y+'px');

                    if(parseInt(maxw - x)>0){
                        var cutRatioX = me.children('.cutImg').width()/parseInt(maxw - x);
                    }else{
                        var cutRatioX = 0;
                    }

                    if(parseInt(maxh - y)>0){
                        var cutRatioY = me.children('.cutImg').height()/parseInt(maxh - y)
                    }else{
                        var cutRatioY = 0;
                    }

                    var cutImgPo = (cutRatioX) +'#'+ (cutRatioY);

                    var coordVal = cutDivSize[0]+'#'+cutDivSize[1]+'#'+cutImgPo;

                    goordArr[index] = coordVal;

                    changeInput.siblings('.imgCoord').val(goordArr);


                });
            });


            $(document).on('mouseup',function(e){
                $(document).unbind('mousemove');
            });
        }



        $(".CutImage").change(function(){

            $(this).siblings('.imgCoord').val('');

            if($(this).prop('multiple')!=true){        //判断是否多文件上传
                var objUrl = getObjectURL1(this.files[0]) ;

                var showImgWidth = $(this).siblings('.showImgDiv').attr('showImgWidth');

                if(!showImgWidth)
                {
                    showImgWidth = '150';
                }

                if (objUrl) {
                        html = '';
                        html += '

'; html += '

'; html += '

'; html += '

'; html += '

'; html += ''px" onload="showCutImg(this)" class="cutImg" class="imgshover" src="'+objUrl+'" alt="图片加载失败" />'; html += '

'; $(this).siblings('.showImgDiv').html(html); } }else{ var objUrl = getObjectURL2($(this).get(0).files); if (objUrl) { var showImgWidth = $(this).siblings('.showImgDiv').attr('showImgWidth'); if(!showImgWidth) { showImgWidth = '150'; } var html = ''; for(var i=0;i'

'" class="fullDiv">'; html += '

'; html += '

'; html += '

'; html += '

'; html += ''px" onload="showCutImg(this)" class="cutImg" class="imgshover" src="'+objUrl[i]+'" alt="图片加载失败" />'; html += '

'; //修改img标签的width样式可改变预览图大小 } $(this).siblings('.showImgDiv').html(html); } //$('.fullDiv').css('float','left'); } }) ; //建立一個可存取到該file的url function getObjectURL1(file) { var url = null ; if (window.createObjectURL!=undefined) { // basic url = window.createObjectURL(file) ; } else if (window.URL!=undefined) { // mozilla(firefox) url = window.URL.createObjectURL(file) ; } else if (window.webkitURL!=undefined) { // webkit or chrome url = window.webkitURL.createObjectURL(file) ; } return url ; } //建立一個可存取到該file的url function getObjectURL2(file) { var url = new Array(); if (window.createObjectURL!=undefined) { // basic for(var i=0;ielse if (window.URL!=undefined) { // mozilla(firefox) for(var i=0;ielse if (window.webkitURL!=undefined) { // webkit or chrome for(var i=0;ireturn url ; }

html代码（这些代码要放在同一级）

<input class="CutImage" type="file" name="img" />


<input ratio="100*100" type="hidden" class="imgCoord" name="imgCoord">


<div showImgWidth="100" class="showImgDiv">div>

php代码

/*图片上传代码略 下面直接进行图片裁剪*/

/**
 * [cut_img 图片裁剪函数]
 * Author: 程威明
 * @param  array $imgs          图片路径数组
 * @param  array $info          裁剪信息數組，包括裁剪后要保存的宽高、图片大小与裁剪开始坐标之比
 * @param  bool $cover          是否覆盖原图，默认不覆盖
 * @return array                若覆盖原图返回裁剪数量，不覆盖返回图片路径组成的数组
 */
function cut_img($imgs=array(),$infoarr=null,$cover=false)
{
    if($infoarr==null) return $imgs;

    //判断是否为数组（必须是一个以图片路径组成的数组）
    $imgs = is_array($imgs)?$imgs:array($imgs);

    //把多个裁剪信息切成单个信息组成的数组
    $infoarr = explode(',', $infoarr);

    $save_file = array();

    $i=0;
    foreach($imgs as $file){

        //如果不覆盖原图，可重新定义图片保存路径
        if(false==$cover){
            $file = $file;
        }

        //把裁剪信息切割成数组，第一个为要保存的宽第二个为要保存的高，第三和第四个为图片宽高与裁剪起点的比例
        $info = explode('#', $infoarr[$i]);

        //裁剪宽高比
        $ratio = $info[0]/$info[1];

        //判断图片是否存在
        if(!file_exists($file)) continue;

        //获取图片信息
        $imgize = getimagesize($file);

        //图片宽度
        $width = $imgize[0];
        //图片高度
        $height = $imgize[1];

        //图片裁剪起点坐标
        $x = $info[2]==0?0:$imgize[0]/$info[2];
        $y = $info[3]==0?0:$imgize[1]/$info[3];

        //判断图片原宽高比与裁剪宽高比的大小
        if($width/$height>=$ratio){
            $width = $height*$ratio;//如大于即为裁剪宽度
        }else{
            $height = $width/$ratio;//如小于即为裁剪高度
        }

        //裁剪的寬高不能超出圖片大小
        if(($width+$x)>$imgize[0]){
            $width = $width-($width+$x-$imgize[0]);
        }

        if(($height+$y)>$imgize[1]){
            $height = $height-($height+$y-$imgize[1]);
        }

        //创建源图的实例
        $src = imagecreatefromstring(file_get_contents($file));

        //創建一個圖像
        $new_image = imagecreatetruecolor($info[0], $info[1]);

        //分配颜色
        $color = imagecolorallocate($new_image,255,255,255);
        //定义为透明色
        imagecolortransparent($new_image,$color);
        //填充图片
        imagefill($new_image,0,0,$color);

        //拷贝图片并保存成指定大小
        imagecopyresized($new_image, $src, 0, 0, $x, $y, $info[0], $info[1], $width, $height);

        //保存

        if(false==$cover){
            $file = rtrim(dirname($file),'/').'/c_'.basename($file);
            $save_file[] = $file;
        }

        imagejpeg($new_image,$file);

        imagedestroy($new_image);
        imagedestroy($src);

        $i++;
    }

    if(false==$cover){
        return $save_file;
    }else{
        return $i;
    }
}