2

我需要更新 x 和 y 值以通过 Ajax 和 PHP 裁剪图像。

此代码在单击按钮时打开一个带有图像的对话框窗口。工作正常，但 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 回答