jQuery图像裁切插件

    今天介绍一款jQuery 图像裁切插件。这款插件的应用很广泛，如在新浪微博或者QQ校友中，我们上传头像时，会有对图像进行裁切这个功能。

    为什么要裁切呢？主要是因为用户上传的头像图片可能会很大，每次打开有头像的页面加载会很慢，所以有必要对用户上传的图片进行裁切，在后台生成容量较小的缩略图。

    jQuery imgareaselect 是一款图像裁切专用的选区插件,它本身并没有图像裁切功能,只是生成一个类似选区的虚线框,拖动四角可以调整选区大小,可以拖动整个选区移动,高亮显示被选择的图像区域，用法有很多种。你可以到一下官方网站看演示或者下载下来，到自己的电脑上运行。

     http://odyniec.net/projects/imgareaselect/

   
      现在的难点是我们怎么在后台生成缩略图呢？

      首先我们必须把上图的各个参数都传递过去，关于各个参数的意义就不用我多说了吧，一目了然。


     下面我用PHP的程序来解释一下后台是怎么做处理的

<?php

//我们假设用户上传的头像是下面的文件路径

$image = $_SERVER ['DOCUMENT_ROOT'] . '/images/test.jpg';


$x1 = $_POST['x1'];//代表上图的x1坐标

$y1 = $_POST['y1'];//代表上图的y1坐标

$width = $_POST['width'];//代表上图的Width

$height = $_POST['height'];//代表上图的Height

//得到图片的相关信息

$img_info = getimagesize ( $image );

$image_type = $img_info ['mime'];




switch ($image_type) {

case 'image/gif' :

//从 GIF 文件或 URL 新建一图像，返回一图像标识符，代表了从给定的文件名取得的图像。

$source = imagecreatefromgif ( $image );

break;

case 'image/jpeg' :

$source = imagecreatefromjpeg ( $image );

break;

case 'image/png' :

$source = imagecreatefrompng ( $image );

break;

}

//等比缩放的基准，其中100是可以改变的，这里我们假设要保存的图像为100×100的像素

$scale = 100/$width;

//对新建的图像等比缩放

$newImageWidth = ceil ( $width * $scale );

$newImageHeight = ceil ( $height * $scale );

//新建一个真彩色图像，代表了一幅大小为 $newImageWidth 和 $newImageHeight 的黑色图像

$newImage = imagecreatetruecolor ( $newImageWidth, $newImageHeight );

//重采样拷贝部分图像并调整大小

imagecopyresampled ( $newImage, $source, 0, 0, $x1, $y1, $newImageWidth, $newImageHeight, $width, $height );

//设置保存新图片的路径

$img_path_info = pathinfo($image);

$thumbnail_path = $img_path_info['dirname'].'/'.time().'.'.$img_path_info['extension'];

switch ($image_type) {

case 'image/gif' :

//以 GIF 格式将图像输出到浏览器或文件

imagegif ( $newImage, $thumbnail_path );

break;

case 'image/jpeg' :

imagejpeg ( $newImage, $thumbnail_path, 90 );

break;

case 'image/png' :

imagepng ( $newImage, $thumbnail_path );

break;

}

?>

    这样子，在原来的目录里会再生成一幅新的图像