0

http://hollywoodlacewigs.netsmartz.us/ 私は上記のプロジェクトに取り組んでいます。ユーザーが写真フォームをアップロードする「アップロード」ボタン、「エリアを選択」、「ミックス」ボタンをクリックします。これにより、トリミングされた領域が他の画像に表示されます。メールリンクをクリックすると、2つの画像が作成されます。

ただし、その前に、画像をトリミングする前に、ユーザーに「回転」、「ズームイン/ズームアウト」の画像を表示させたいと思います。

jcrop、jqueryuiドラッグ可能を使用しています

スクリプトは次のとおりです。

$(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 には 1 つのバグが存在します - IE 8 でサイズ変更 (高さ、幅) を変更すると、VML のドラッグ可能な要素が動かなくなるという修正が記載されて います (コメントに回答を追加したいのですが、許可がありません)。

于 2012-12-07T11:50:29.370 に答える