简单测试实现 博客园的头像上传功能 使用插件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;

}

第四步：

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

?>