利用Jquery的cropper插件实现拖动层动态头剪切(裁剪头像)图片

转贴自 http://www.oophp.cn/article/article/id/173/
先把我实现在的效果给贴出来..给大家看一下..如图片:



要实现这样的功能,,您先要会Jquery这个类库..关于它的用法..大家可以去它的官方网站http://jquery.com/ 我想当你认识它以后.你会发现它的强大的功能与方便实用的性能.

OK!我们要在上传的图片上实现图片剪切功能,,我们也要去找一个cropper.js基于jQuery的裁切控件..我想找到写这个控件的作者地址.现在找不到

了...实在不好意思...要是有朋友用过这个就说一下它的地址..我加上...呵呵..

我在这里要做的是要当我们选写图片的位置时..我们就要把图片的定位点发送到服务器端,通过AJAX方式把图片在服务器端给剪切出图片(裁剪头像)的你要的部分.

我们一般实现在方法是这样:

第一:通过JS取到图片的实位点..一般来说是要定好4个坐标点(分别为top,left,width,height.)..相对于图片的top与left的点.还有就是你要剪切出来图片(裁剪头像)的高度和宽度.

第二:就是要把你上传后的图片位置传送给服务器端..这样我们就可以能过上面4个点,结合图片的位置.把我们的图片给剪切出来.

第三:就是处理你的剪切出来的图片了..接下来就是存在你想要的地方.

实现方式如下:

1.引入Jquery.js文件以及cropper.js的二个文件..(注意:jquery.js一定要放在cropper.js文件前面)

<script type="text/javascript" src="script/jquery.js"></script>
<script type="text/javascript" src="script/cropper.js?"></script>

2.接着我们要写图片剪切的JS以及拖动的实现.这里有croper.js.它可以帮我们做到.我的js实现如下(代码上有注解):

<script type="text/javascript">
$(window).bind('load',function(){
new cropper('#thisHeadImg',{
onInitial:function(img,crop){
var div = $('#smallimg').html('<img src="'+img+'"/>')
.height(crop.height).width(crop.width)[0];
div.scrollTop = crop.top;
div.scrollLeft = crop.left;
},
min : {width: 150,height: 150},//遮罩框的大小.
onChange:function(img,crop){
var div = $('#smallimg').height(crop.height).width(crop.width)[0];
div.scrollTop = crop.top;
div.scrollLeft = crop.left;
}
}).bind('onCrop',function(img,crop){
var imgurl=$('#thisHeadImg')[0].src;
var uid=$('#userid').val();
$('#server')[0].src ="index.php?imgurl="+imgurl+"&w="+crop.width
+"&h="+crop.height+"&x="+crop.left+"&y="+crop.top;
//这里就是我们要传递到服务器端的数据和image图片
});
});
</script>

3.下面是HTML代码:

<form id="companyform" enctype="multipart/form-data"
name="companyform" action="index.php" method="post">
<p><strong>标题：</strong>
<img id="thisHeadImg" src="<?if($imgurl==''):
echo URL_PATH."/images/noimg.jpg";
else: echo $imgurl;  endif;?>" width="200px" height="200px"/>
<img src="blank.jpg" style="float:right;display:hidden;"
id="server" /> </p>
<p><strong>个传企业LOGO:</strong> <span id="ImgInputSpan">
<input name="headFile[]" id="headFile" type="file" size="30" />
</span><input type="button" name="Submit2"
onclick="uploadImg('<?=$uid?>');" value="上传" />
<p style="color:#999">请注意:LOGO图片格式只能为jpeg,jpg,png,gif.</p>
</p> </form>

4. 服务器端的处理方式..我是用PHP来实现 ..其它语言请自行更改..程序实现的原理是这样:先取到AJAX传送过来的4个坐标值..然后就是通过图片地址,取到图片类型..

因为图片类型不同,我们要用不同的方式来取图片(剪切出图片)..(我遇到一个问题就是bmp格式的图片..我不能剪切出图片,现在还没找到很好的解决

的方式.要有朋友会.一定告诉我这小菜鸟..哈哈..先谢谢了..).下面是我实现的代码(有注解)..

<?php
//这里是index.php.在这里做剪切的动作
$maxW = UResquest::get ( "w" );
$maxH = UResquest::get ( "h" );
$X = UResquest::get ( "x" );
$Y = UResquest::get ( "y" );
$imgurl=UResquest::get('imgurl');
//图片路径    img
$url=UPath::toDbPath( "b2b", "head" ,'');
$newheadUrl = UPath::toAbsoluteRootPath ( $url );
function fileExtName($filename) {
$filearea = explode ( ".", $filename ); //用.分离文件名
$partnum = count ( $filearea ); //计算数组中的数目
$fileclass = $filearea [$partnum - 1]; //得出文件的后缀
return $fileclass;
}
$imgtype=fileExtName($imgurl);
switch ($imgtype) {
case 'jpg':
$img = imagecreatefromjpeg($imgurl);
break;
case 'jpeg':
$img = imagecreatefromjpeg($imgurl);
break;
case 'png':
$img = imagecreatefrompng($imgurl);
break;
case 'gif':
$img = imagecreatefromgif($imgurl);
break;
//这里没有搞定..不知道是为什么.bmp 格式的不能剪切
case 'bmp':
$img = imagecreatefromwbmp($imgurl);
break;
default:
$img = imagecreatefromjpeg($imgurl);
break;
}
$newImgName='cutimg.'.$imgtype;
$db = UPath::toDbPath ( "b2b", "head", $newImgName );
$iOut = imagecreatetruecolor ($maxW,$maxH);
//删除已存在头像
$user = UFactory::getUser ();
$headurl = $user->getUsers ( array ('head_url' ), 'uid=' . $uid );
$imgurl = ROOT_PATH ."/".$headurl [0] ['head_url'];
@unlink($imgurl);
//修改会员头像地址
$user->editUser ( array ("head_url" => $db ), $uid );
//只剪切一个开始部位的小图.复制图片的一部分
imagecopy($iOut,$img,0,0,$X,$Y,$maxW,$maxH);
switch ($imgtype) {
case 'jpg':
imagejpeg($iOut,$newheadUrl.$newImgName,75);
break;
case 'jpeg':
imagejpeg($iOut,$newheadUrl.$newImgName,75);
break;
case 'png':
imagepng($iOut,$newheadUrl.$newImgName,7);
break;
case 'gif':
imagegif($iOut,$newheadUrl.$newImgName,75);
break;
case 'bmp':
//这里没有搞定..不知道是为什么.bmp 格式的不能剪切
$foreground_color = imagecolorallocate($img, 255, 0, 0);
imagewbmp($iOut,$newheadUrl.$newImgName);
break;
default:
imagejpeg($iOut,$newheadUrl.$newImgName);
break;
}
imagedestroy($img);
?>

Jquery的cropper插件实现拖动层动态头剪切(裁剪头像)图片的实现方式我是这样做的..

+++++++++++++++++++++++++++++++++++++++++++++

转贴自 http://www.xij.cn/blog/wp-content/uploads/2008/10/ImageCropper.html

jQuery头像裁剪 Image Cropper

实现原理：

这是一个基于jQuery UI的图像裁剪前端脚本。

利用Draggable和Resizable两个插件让虚线框可移动可缩

放，并且设置相关参数移动界限、初始大小和位置、等比缩放、事件。

给大图加CSS透明度，于是它就灰了。虚线框内清晰图其实就是CSS背景background。以大图左上角为原点，计算出虚线框左上角的坐标offset（就叫坐标吧- -|）。虚线框的坐标值跟背景图position值刚好相反。当移动或缩放时计算一下，然后改变背景图的位置position，这样效果就出来了。

再说下预览图，首先预览图跟实际图是不一样大的，它们之间存在一个比率n（所设预览图大小除实际图大小）。前面已经计算过虚线框的坐标了，预览图的
scrollTop和scrollLeft乘比率n刚好跟这个坐标值相等，当移动或缩放时计算一下，然后改变预览图的位置scrollTop和
scrollLeft，这样效果就出来了。

当移动完或缩放完时顺便将虚线框的坐标和宽高记录到隐藏域传给后台程序，剩下工作归后台技术了。

有问题或建议可以给我留言

一些碎片：

html如下：

<form id="setFace" name="setFace" method="post" action="">

<div id="imgBox"><img id="faceImg" src="style/xx.jpg" /><div id="imgCut"></div></div>

<div
id="imgBox_pre"><strong>头像预览</strong><div><img
id="faceImg_pre" src="style/xx.jpg" /></div><button
type="submit">保存头像</button></div>

left<input name="left" type="text" id="left" size="3" readonly="readonly" />

top<input name="top" type="text" id="top" size="3" readonly="readonly" />

width<input name="width" type="text" id="width" size="3" readonly="readonly" />

height<input name="height" type="text" id="height" size="3" readonly="readonly" />

</form>

css默认样式如下：

#setFace{position:relative;}

#imgBox_pre{float:left;width:100px;margin-left:50px;}

#imgBox_pre strong{display:block;text-align:center;color:#090;}

#imgBox_pre button{display:block;width:70px;margin:0 auto;}

#imgBox_pre div{width:48px;height:48px;margin:5px auto 20px;overflow:hidden;border:#eee 5px solid;}

#imgBox{float:left;border:#ddd 3px solid;}

#imgCut{border:#fff 1px dashed;width:100px;height:100px;position:absolute;top:20px;left:20px;cursor:move;}

#faceImg{opacity:0.5;filter:alpha(opacity=50);}

JS如下：

var scale=1;

var imgH=$("#faceImg").height();

var imgW=$("#faceImg").width();

var src=$("#faceImg").attr("src");

var scale=48/96;

$(function(){

$("#imgBox").width(imgW).height(imgH);

$("#setFace").width(700).height(imgH+4);

$("#imgCut").css("background","url("+src+") -20px -20px no-repeat");

$("#faceImg_pre").height(imgH*scale);

$("#imgBox_pre div").scrollTop(20*scale).scrollLeft(20*scale);

});

$("#imgCut").draggable({

containment:$("#faceImg"),

drag:function(){

var temp_top=$(this).offset().top-$("#faceImg").offset().top;

var temp_left=$(this).offset().left-$("#faceImg").offset().left;

scale=48/$(this).height();

$("#faceImg_pre").height(imgH*scale);

$(this).css("background","url("+src+") -"+(temp_left+1)+"px -"+(temp_top+1)+"px no-repeat");

$("#imgBox_pre div").scrollTop(temp_top*scale).scrollLeft(temp_left*scale);

},

stop:function(){

$("#width").val($(this).width());

$("#height").val($(this).height());

$("#left").val(($(this).offset().left-$("#faceImg").offset().left));

$("#top").val(($(this).offset().top-$("#faceImg").offset().top));

}

});

$("#imgCut").resizable({

containment:$("#faceImg"),

handles:"all",

knobHandles:true,

aspectRatio:true,

minWidth:96,

minHeight:96,

resize:function(){

var temp_top=$(this).offset().top-$("#faceImg").offset().top;

var temp_left=$(this).offset().left-$("#faceImg").offset().left;

scale=48/$(this).height();

$("#faceImg_pre").height(imgH*scale);

$(this).css("background","url("+src+") -"+(temp_left+1)+"px -"+(temp_top+1)+"px no-repeat");

$("#imgBox_pre div").scrollTop(temp_top*scale).scrollLeft(temp_left*scale);

},

stop:function(e,ui){

$("#width").val($(this).width());

$("#height").val($(this).height());

$("#left").val(($(this).offset().left-$("#faceImg").offset().left));

$("#top").val(($(this).offset().top-$("#faceImg").offset().top));

}

});