jQuery+PHP实现上传裁剪图片
本文是一个简单的jquery图片预览+裁剪的例子，原理是在前端获取要裁剪的信息，如宽高比、裁剪坐标，上传图片之后在后端php进行切割
jquery代码（必须在最后面引入）
functionshowCutImg(showImg){
varshowImg=$(showImg);
varchangeInput=showImg.parents('.showImgDiv').siblings('.CutImage');
varsize=changeInput.siblings('.imgCoord').attr('ratio').split('*');
varneedWidth=size[0];
varneedHeight=size[1];
varratio=parseInt(needWidth)/parseInt(needHeight);
ratio=parseFloat(ratio.toFixed(2));
varthisFullDiv=showImg.parent();
varcoordArr=changeInput.siblings('.imgCoord').val().split(',');
thisCutImgWidth=showImg.width();
thisCutImgHeight=showImg.height()
thisFullDiv.css('width',thisCutImgWidth);
thisFullDiv.css('height',thisCutImgHeight);
if((thisCutImgWidth/thisCutImgHeight)>=ratio){
varthisCutDivHeight=thisCutImgHeight;
varthisCutDivWidth=thisCutDivHeight*ratio;
}else{
varthisCutDivWidth=thisCutImgWidth;
varthisCutDivHeight=thisCutDivWidth/ratio;
}
varhideWidth=(thisFullDiv.width()-thisCutDivWidth)/2;
showImg.siblings('.hideImgLeft').width(hideWidth);
showImg.siblings('.hideImgRight').width(hideWidth);
varhideHeight=(thisFullDiv.height()-thisCutDivHeight)/2;
showImg.siblings('.hideImgTop').width(thisCutDivWidth);
showImg.siblings('.hideImgBottom').width(thisCutDivWidth);
showImg.siblings('.hideImgTop').height(hideHeight);
showImg.siblings('.hideImgBottom').height(hideHeight);
if(hideWidth>0){
varcutRatioX=thisCutImgWidth/hideWidth;
}else{
varcutRatioX=0
}
if(hideHeight>0){
varcutRatioY=thisCutImgHeight/hideHeight;
}else{
varcutRatioY=0;
}
varcoord=needWidth+'#'+needHeight+'#'+(cutRatioX)+'#'+(cutRatioY);
if(coordArr!=''){
coordArr.push(coord);
}else{
coordArr=[coord];
}
changeInput.siblings('.imgCoord').val(coordArr);
$('.fullDiv').on('mousedown',function(e){
varme=$(this);
varchangeInput=me.parent().siblings('.CutImage');
varindex=me.attr('index');
varoldx=e.pageX;
varoldy=e.pageY;
varimgleft=me.children('.cutImg').position().left;
varimgtop=me.children('.cutImg').position().top;
varmaxw=me.children('.hideImgLeft').width();
varmaxh=me.children('.hideImgTop').height();
vargoordArr=changeInput.siblings('.imgCoord').val().split(',');
varcutDivSize=goordArr[index].split('#');
$(document).mousemove(function(e){
varnewx=e.pageX;
varnewy=e.pageY;
varmovex=newx-oldx;
varmovey=newy-oldy;
varx=movex+imgleft;
vary=movey+imgtop;
if(Math.abs(x)>maxw){
if(x>0)x=maxw;
if(x<0)x=-maxw;
}
if(Math.abs(y)>maxh){
if(y>0)y=maxh;
if(y<0)y=-maxh;
}
me.children('.cutImg').css('left',x+'px');
me.children('.cutImg').css('top',y+'px');
if(parseInt(maxw-x)>0){
varcutRatioX=me.children('.cutImg').width()/parseInt(maxw-x);
}else{
varcutRatioX=0;
}
if(parseInt(maxh-y)>0){
varcutRatioY=me.children('.cutImg').height()/parseInt(maxh-y)
}else{
varcutRatioY=0;
}
varcutImgPo=(cutRatioX)+'#'+(cutRatioY);
varcoordVal=cutDivSize[0]+'#'+cutDivSize[1]+'#'+cutImgPo;
goordArr[index]=coordVal;
changeInput.siblings('.imgCoord').val(goordArr);
});
});
$(document).on('mouseup',function(e){
$(document).unbind('mousemove');
});
}
$(".CutImage").change(function(){
$(this).siblings('.imgCoord').val('');
if($(this).prop('multiple')!=true){//判断是否多文件上传
varobjUrl=getObjectURL1(this.files[0]);
varshowImgWidth=$(this).siblings('.showImgDiv').attr('showImgWidth');
if(!showImgWidth)
{
showImgWidth='150';
}
if(objUrl){
html='';
html+='';
html+='