1.translate(-16px,3px) scale(2.6) rotate(90deg)有顺序要求，其值为用户操作后获取到的
2.选区大小为240*240,显示时选区与图片中心重合
3.该函数在处理旋转90°/270°+移动时选区映射存在问题，其它条件下可使用
4.图片旋转仅获取截图区域，未做旋转处理
this.curImgStatus = {
curScale: 1.0,
curRotate: 0,
curMoveX: 0,
curMoveY: 0,
}
getStyle: function () {
var that = this
return [
‘translate(‘, that.curImgStatus.curMoveX, ‘px,‘, that.curImgStatus.curMoveY, ‘px) ‘,
‘scale(‘, that.curImgStatus.curScale, ‘) ‘,
‘rotate(‘, that.curImgStatus.curRotate, ‘deg)‘
].join(‘‘)
}
getSize: function () {
var that = this;
var status = that.curImgStatus;
var sw = that.img.naturalWidth;
var sh = that.img.naturalHeight;
return { sw: sw, sh: sh };
},
cutPhoto: function () {
//变换： translate(-16px,3px) scale(2.6) rotate(90deg)
var size = this.getSize();//
var img = this.img;
var status = this.curImgStatus;
var canvas = $(‘<canvas width="‘ + size.sw + ‘" height="‘ + size.sh + ‘"></canvas>‘)[0],
canvas1 = $(‘<canvas width="240" height="240"></canvas>‘)[0],
ctx = canvas.getContext(‘2d‘),
ctx1 = canvas1.getContext(‘2d‘);
var destLength = parseInt(240 / status.curScale);
//将旋转角度转化为0-360度之间以便处理
var destRotate = (status.curRotate) % 360;
destRotate = destRotate > 0 ? destRotate : destRotate + 360;
//裁剪框四个点,最后一个点处理0%360=360bug
var startPointArr = [{ x: -120, y: -120 }, { x: 120, y: -120 }, { x: 120, y: 120 }, { x: -120, y: 120 }, { x: -120, y: -120 }]
//根据旋转角度旋转起始点
var startPoint = startPointArr[destRotate / 90];
//平移操作
var x = parseInt(startPoint.x - status.curMoveX);
var y = parseInt(startPoint.y - status.curMoveY);
//缩放操作
x = parseInt(x / status.curScale);
y = parseInt(y / status.curScale);
//旋转操作
switch (destRotate) {
//！！90/270+移动需要调整
case 90:
x = -x;
break;
case 180:
x = -x;
y = -y;
break;
case 270:
y = -y;
break;
default:
}
//移动原点至画布左上角
x = x + size.sw / 2;
y = y + size.sh / 2;
console.log(x, y)
//切片图片
ctx.drawImage(this.img, x, y, destLength, destLength, 0, 0, 240, 240);
//整体切割
var dataImg = ctx.getImageData(0, 0, 240, 240);
//旋转
ctx1.putImageData(dataImg, 0, 0, 0, 0, 240, 240);
var data = canvas1.toDataURL();
// var tImg = new Image();
// tImg.src = data;
// canvas1.height = canvas1.height;
// ctx1.translate(120, 120);
// ctx1.rotate(destRotate * Math.PI / 180)
// ctx1.translate(-120, -120);
// ctx1.drawImage(tImg, 0, 0);
// data = canvas1.toDataURL();
this.reset();
return data;
}