我使用Jquery Jcrop通过输入文件从本地图像中裁剪。这是我加载和显示图像的功能。它还激活了jcrop。
displayUploadedImage = function (input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onloadend = function (e) {
$('#profilePhotos-modal-crop').modal();
var height = $('#crop-body').height();
var width = $('#crop-body').width();
image = e.target.result;
var img = new Image();
img.src = image;
img.onload = function () {
var imageWidth = img.width;
var imageHeight = img.height;
var size = Math.min(imageWidth, imageHeight);
var x1 = Math.floor((imageWidth - size) / 2);
var x2 = imageWidth - x1;
var y1 = Math.floor((imageHeight - size) / 2);
var y2 = imageHeight - y1;
var minSize = Math.floor(0.8 * size);
$('#image-container').attr('src', image);
$('.crop').Jcrop({
minSize: [minSize, minSize],
onSelect: updateCoords,
bgOpacity: .4,
setSelect: [ x1, y1, x2, y2 ],
aspectRatio: 1,
boxWidth: width,
boxHeight: height
}, function () {
jcrop_api = this;
});
}
};
reader.readAsDataURL(input.files[0]);
}
};
效果很好。但我有一个旋转图像的按钮,但是我无法旋转裁剪器。有什么想法在这里旋转吗?或者如何改进我的功能:
var rotateImage = function (iRotate) { //iRotate is the number in degrees
$('.image-container').find('img').each(function () {
var rotate = 'rotate(' + iRotate + 'deg)';
$(this).css({
'-webkit-transform': rotate,
'-moz-transform': rotate,
'-o-transform': rotate,
'-ms-transform': rotate,
'transform': rotate
});
});
jcrop_api.setOptions({
rotate: iRotate // this doesn't work
});
}
感谢。