maybe yes 发表于2014-12-12 10:58

原文链接 :   来自 : 

前端使用Jcrop实现预览和获取图片大小，选定位置等信息。关于Jcrop，项目地址在GITHUB上，它基于MIT开源协议。本人看了下项目的源代码，感觉作者蛮认真的。Jcrop做到了兼容IE系列和其他主流浏览器，非常稳定，让开发者不再为前端方面花费太多精力。加上本人不太喜欢Flash实现，纯JavaScript实现的功能效率会更高。由于时间比较仓促，代码没有过多的优化，有点乱，下面公布前端实现和服务端处理图片部分代码。

前端实现方式如下：

imagecropper方法在网上找的，写的比较差，以后有时间会整理下代码。后台图片处理方式如下：

     $target_ratio)    {        $cropped_width  = $source_width;        $cropped_height = $source_width * $target_ratio;        $source_x = 0;        $source_y = ($source_height - $cropped_height) / 2;    }    // 源图过宽    elseif ($source_ratio < $target_ratio)    {        $cropped_width  = $source_height / $target_ratio;        $cropped_height = $source_height;        $source_x = ($source_width - $cropped_width) / 2;        $source_y = 0;    }    // 源图适中    else    {        $cropped_width  = $source_width;        $cropped_height = $source_height;        $source_x = 0;        $source_y = 0;    }    switch ($source_mime)    {        case 'image/gif':            $source_image = imagecreatefromgif($source_path);            break;        case 'image/jpeg':            $source_image = imagecreatefromjpeg($source_path);            break;        case 'image/png':            $source_image = imagecreatefrompng($source_path);            break;        default:            return false;            break;    }    $target_image  = imagecreatetruecolor($target_width, $target_height);    $cropped_image = imagecreatetruecolor($cropped_width, $cropped_height);    // 裁剪    imagecopy($cropped_image, $source_image, 0, 0, $source_x, $source_y, $cropped_width, $cropped_height);    // 缩放    imagecopyresampled($target_image, $cropped_image, 0, 0, 0, 0, $target_width, $target_height, $cropped_width, $cropped_height);    /* header('Content-Type: image/jpeg'); */    ob_start();    imagejpeg( $target_image );    return ob_get_clean();    /* imagedestroy($source_image);    imagedestroy($target_image);    imagedestroy($cropped_image);    exit; */}$boundx = $_POST['boundx'];$boundy = $_POST['boundy'];$posinfo = $_POST['posinfo'];$realimg = '用户上传后的原图地址';$resizeimg = imagecropper($realimg, $boundx, $boundy);file_put_contents($realimg, $resizeimg);/* 上面完成了图片的大小压缩，下面将图片进行裁剪 */$source_info   = getimagesize($realimg);$source_mime   = $source_info['mime'];switch ($source_mime){    case 'image/gif':        $source_image = imagecreatefromgif($realimg);        break;    case 'image/jpeg':        $source_image = imagecreatefromjpeg($realimg);        break;    case 'image/png':        $source_image = imagecreatefrompng($realimg);        break;    default:        return false;        break;}$target_image  = imagecreatetruecolor($posinfo['w'], $posinfo['h']);$cropped_image = imagecreatetruecolor($posinfo['w'], $posinfo['h']);imagecopy( $cropped_image, $source_image, 0, 0, $posinfo['x'], $posinfo['y'], $posinfo['w'], $posinfo['h'] );imagecopyresampled($target_image, $cropped_image, 0, 0, 0, 0, $posinfo['w'], $posinfo['h'], $posinfo['w'], $posinfo['h']);ob_start();switch( $source_mime ){    case 'image/gif':        imagegif( $target_image );        break;    case 'image/jpeg':        imagejpeg( $target_image );        break;    case 'image/png':        imagepng( $target_image );        break;    default:        return false;}file_put_contents($realimg, ob_get_clean() );

附上运行截图：