我正在使用此库上传和裁剪图像 http://andyshora.com/angular-image-cropper.html
我添加了向左旋转,向右旋转,水平翻转和垂直翻转的功能,以克服移动EXIF方向问题。
scope.clockwise = function() {
scope.angleInDegrees+=90;
drawRotated(scope.angleInDegrees);
};
scope.counterclockwise = function() {
scope.angleInDegrees-=90;
drawRotated(scope.angleInDegrees);
};
function drawRotated(degrees){
ctx.clearRect(0,0,canvasWidth,canvasHeight);
ctx.save();
ctx.translate(canvasWidth/2,canvasHeight/2);
ctx.rotate(degrees*Math.PI/180);
transformPoint = untransformPoint = function(x, y) {
return {
x: x,
y: y
};
};
ctx.drawImage($img,-$img.width/2,-$img.width/2);
ctx.restore();
}
旋转后,我无法使用旋转图像移动图像。点击图像时,它会自动显示第一个上传的图像(即旋转前)。
小提琴链接http://jsfiddle.net/x9f94yz5/1/(不是正在运行的代码)