Question

http://hollywoodlacewigs.netsmartz.us/ 我正在进行上述项目。用户上传图片'上传'按钮，然后'选择区'，然后点击'混合'按钮。这将显示裁剪区域到其他图像。点击电子邮件链接将组成两个图像。

但在此之前，我希望在裁剪图像之前让用户“旋转”，“放大/缩小”图像。

我正在使用jcrop，jquery ui draggable

这是脚本：

$(document).ready(function() { 
    $('#UploadForm').change('submit', function(e) {
        e.preventDefault();
        $('#SubmitButton').attr('disabled', ''); // disable upload button
        $('#left-pic').hide();
        $('#output').show();
        //show uploading message
        $("#output").html('<img style="margin:45px 0px 0px 35px; " src="images/ajax-loader.gif" alt="Please Wait"/>');
        $(this).ajaxSubmit({
            target: '#output',
            success:  afterSuccess //call function after success
        });
    });


}); 

function afterSuccess(){ 
    $('#UploadForm').resetForm();  // reset form
    $('#SubmitButton').removeAttr('disabled'); //enable submit button
    $('#cropbox').Jcrop({       
        aspectRatio: 1,
        onSelect: updateCoords,
        bgOpacity: 0.5,
        bgColor: 'white',
        addClass: 'jcrop-dark',
        setSelect: [ 34, 50, 134, 155 ]
    });     
}

function updateCoords(c){
    $('#x').val(c.x);
    $('#y').val(c.y);
    $('#w').val(c.w);
    $('#h').val(c.h);
}

function checkCoords(){
    if (parseInt($('#w').val())) return true;
    alert('Please select a crop region then press submit.');
    return false;
}

$(function() {
    $('#draggable3').draggable({
        containment: $('#draggable3').parent(),
        cursor: "move", cursorAt: { top: 56, left: 56 },
         drag: function(event, ui) {
            // Show the current dragged position of image
            var currentPos = $(this).position();
            // $("#xpos").text("CURRENT: \nLeft: " + (currentPos.left-580) + "\nTop: " + (currentPos.top-82));
            $('#x3').val(currentPos.left-580);
            $('#y3').val(currentPos.top-82);
        }
    });
});

Answer 1

您可以使用http://www.cropzoom.com.ar/demo/，我使用过并喜欢它。在IE中存在一个错误 - 修复在Draggable element in VML get stuck when size change (height, width) in IE 8上描述（我想在评论中添加答案，但没有许可）

jcrop缩放，旋转，裁剪和稍后调整大小

1 个答案: