jQuery+PHP实现上传裁剪图片

2020-05-17 06:23:50易采站长站整理

$(document).mousemove(function(e){
var newx = e.pageX;
var newy = e.pageY;

var movex = newx - oldx;
var movey = newy - oldy;

var x = movex + imgleft;
var y = 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){
var cutRatioX = me.children('.cutImg').width()/parseInt(maxw - x);
}else{
var cutRatioX = 0;
}

if(parseInt(maxh - y)>0){
var cutRatioY = me.children('.cutImg').height()/parseInt(maxh - y)
}else{
var cutRatioY = 0;
}

var cutImgPo = (cutRatioX) +'#'+ (cutRatioY);

var coordVal = 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){ //判断是否多文件上传
var objUrl = getObjectURL1(this.files[0]) ;

var showImgWidth = $(this).siblings('.showImgDiv').attr('showImgWidth');

if(!showImgWidth)
{
showImgWidth = '150';
}

if (objUrl) {
html = '';
html += '<div style="border:1px solid #000;position:relative;z-index:2;overflow:hidden;cursor:move;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;" index="0" class="fullDiv">';
html += '<div style="position:absolute;background:#ccc;top:0;z-index:4;opacity:0.95;left:0;right:0;margin:auto;" class="hideImgTop"></div>';
html += '<div style="position:absolute;background:#ccc;bottom:0;z-index:4;opacity:0.95;left:0;right:0;margin:auto;" class="hideImgBottom"></div>';
html += '<div style="position:absolute;height:100%;background:#ccc;left:0;z-index:4;opacity:0.95;" class="hideImgLeft"></div><div style="position:absolute;z-index:3;left:0;right:0;top:0;bottom:0;margin:auto;" class="cutDiv"></div>';
html += '<div style="position:absolute;height:100%;background:#ccc;right:0;z-index:4;opacity:0.95;" class="hideImgRight"></div>';
html += '<img style="position:absolute;z-index:1;width:'+showImgWidth+'px" onload="showCutImg(this)" class="cutImg" class="imgshover" src="'+objUrl+'" alt="图片加载失败" />';