0

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

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

我正在使用 jcrop，jquery ui 可拖动

这是脚本：

$(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);
        }
    });
});
4

1 回答 1

0

你可以使用http://www.cropzoom.com.ar/demo/，我用过并且喜欢它。在 IE 中存在一个错误 -在 IE 8 中的大小更改（高度、宽度）时 VML 中的 Draggable 元素卡住 （我想在评论中添加答案，但没有权限）中描述了修复

于 2012-12-07T11:50:29.370 回答