简单测试实现 博客园的头像上传功能 使用插件jquery jcrop+fineupload

1 使用jcrop插件+ php+javascript可以简单的实现裁剪图片。

下面是我简单实现的过程：

    第一步：从网站下载插件：http://deepliquid.com/content/Jcrop.html

    第二步：解压到网站目录下，便于测试，打开其中demo下面的一个文件：tutorial3.html，修改头部部分javascript代码：

     在updatePreview函数加入：

//赋值

$('#x').val(c.x);

$('#y').val(c.y);

$('#w').val(c.w);

$('#h').val(c.h);

在下面的页面底部加入表单：


<form action="save.php" method="post">
      <input type="hidden" name="image_name" value="demo_files/sago.jpg" />
            <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="Crop Image" class="btn btn-large btn-inverse" />
  </form> 

 

第三步：新建一个save.php,

   写入代码：

 <?php

if ($_SERVER['REQUEST_METHOD'] == 'POST')
{
    $targ_w = $_POST['w'];
    $targ_h = $_POST['h'];
    $jpeg_quality = 90;
    $src = $_POST['image_name'];
    $img_r = imagecreatefromjpeg($src); //imagecreatefromjpeg() 返回一图像标识符,代表了从给定的文件名取得的图像。 imagecreatefromjpeg() 在失败时返回一个空字符串,并且输出一条错误信息

    $dst_r = ImageCreateTrueColor( $targ_w, $targ_h );//用imagecreatetruecolor(int x,int y)建立的是一幅大小为 x和 y的黑色图像(默认为黑色)，如想改变背景颜色则需要用填充颜色函数imagefill($img,0,0,$color);
    imagecopyresampled($dst_r,$img_r,0,0,$_POST['x'],$_POST['y'],   $targ_w,$targ_h,$_POST['w'],$_POST['h']);//imagecopyresampled()改变的图片质量更高。
    header('Content-type: image/jpeg');
    imagejpeg($dst_r,null,$jpeg_quality);
    exit;
}


第四步：

显示即可取到所要的图片截图后的结果和相关其他信息，然后可以针对此进行操作！
?>