Jquery Jcrop旋转图像

时间:2016-08-25 16:04:10

标签: javascript jquery html css jcrop

我使用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
});

}

感谢。

0 个答案:

没有答案