2

Ajax と PHP を使用して画像をトリミングするには、x 値と y 値を更新する必要があります。

このコードは、ボタンをクリックすると画像付きのダイアログ ウィンドウを開きます。正常に動作しますが、Firebug は NaN ポスト変数を示します。どうすれば正しい値を取得できますか? 数値変数を返すために parseFloat() と parseInt() を試しました。

jQuery(function($) {

    jQuery('#jc-hidden-image').Jcrop({
        onChange: showCoords,
        onSelect: showCoords
    });

});

function showCoords(c) {
    jQuery('#x1').val(c.x);
    jQuery('#y1').val(c.y);
    jQuery('#x2').val(c.x2);
    jQuery('#y2').val(c.y2);
    jQuery('#w').val(c.w);
    jQuery('#h').val(c.h);
};
jQuery(function($) {

    $('#jc-dyn-btn').click(function() {
        var jcrop_api;
        var id = $(this).attr('data-id');
        var rel = $(this).attr('data-rel');
        var value = $(this).attr('data-value');
        var mainImage = rel + '/' + id;
        var x, y, w, h;
        x = Math.round($('#x1').val());
        y = Math.round($('#y1').val());
        w = Math.round($('#w').val());
        h = Math.round($('#h').val());
        $("
    img.jc - hidden - image ").attr("
    src ", mainImage);
        var $dialog = $(" < div > < div id = \"jc-dialog\ class=\"jc-dialog\"><img class=\"jc-hidden-image\" src=\"" + mainImage + "\" /><form id=\"coords\" class=\"coords\"><label>X1<input type=\"text\" size=\"4\" id=\"x1\" name=\"x1\" /></label><label>Y1 <input type=\"text\" size=\"4\" id=\"y1\" name=\"y1\" /></label><label>X2 <input type=\"text\" size=\"4\" id=\"x2\" name=\"x2\" /></label><label>Y2 <input type=\"text\" size=\"4\" id=\"y2\" name=\"y2\" /></label><label>W <input type=\"text\" size=\"4\" id=\"w\" name=\"w\" /></label><label>H <input type=\"text\" size=\"4\" id=\"h\" name=\"h\" /></label></form></div>");

        $dialog.find('img').Jcrop({
            onChange: showCoords,
            onSelect: showCoords
        }, function() {
            jcrop_api = this;
            jcrop_api.animateTo([259, 81, 469, 304]);
            $dialog.dialog({
                modal: true,
                title: 'Jcrop in jQuery-ui Dialog (Dynamic)',
                close: function() {
                    $dialog.remove();
                },
                width: jcrop_api.getBounds()[0] + 34,
                resizable: false,
                buttons: {
                    "SAVE": function() {
                        $.ajax({

                            url: "crop.php",
                            type: "POST",
                            data: "x=" + x + "&y=" + y + "&w=" + w + "&h=" + h + "&src=" + mainImage,

                            success: function() {
                                //  $dialog.dialog('close');
                            }
                        });
                    },
                    "CLOSE": function() {
                        $dialog.dialog('close');
                    }
                }
            }) //dialog
        }); //function
        return false;
    }); //clik
}); //jquery​
4

2 に答える 2

6

これを試して、のparseFloatように使用してください

Math.round(parseFloat($('#x1').val()));

アップデート：

また、入力に right ids を使用していることを確認して$('#x1')ください$('#x')。 ここに例があります。

于 2012-10-14T16:25:07.513 に答える
1

最初に を使用する必要がありますparseFloat。ステートメントを次のように変更します。

x = Math.round( parseFloat($('#x1').val()) );
y = Math.round( parseFloat($('#y1').val()) );
w = Math.round( parseFloat($('#w').val()) );
h = Math.round( parseFloat($('#h').val()) );
于 2012-10-14T16:26:17.253 に答える