Javascript 传递表单变量

Question

对 Javascript 非常陌生，因为我似乎无法弄清楚这个问题而感到沮丧，因为我知道答案将是非常基本的!

我正在尝试自定义 JCrop，这是一个图像裁剪工具。

我想在运行 Jcrop 之前询问用户 Canvas 的大小，以便裁剪工具根据他们的表单选择以固定的比例运行

图像比例的正确格式需要是1/1、1/2、1/3，并且已由我的表单设置。

            <select name="size" id="size">
                <option value="">Please select the size of your canvass</option>
                <option value="1/1">1x1</option>
                <option value="1/2">1x2</option>
                <option value="1/3">1x3</option>
                <option value="1/4">1x4</option>
                <option value="1/5">1x5</option>
                <option value="1/6">1x6</option>
            </select>


    <script language="Javascript">


    $('input[name=size]').click(function() {
    MethodTwo();
    });
function MethodTwo()
{
            var SIZEVARIABLE = $('#size').val();        
}
    // initialize Jcrop
            $('#preview').Jcrop({
                minSize: [32, 32], // min crop size
                aspectRatio : SIZEVARIABLE, // keep aspect ratio 1:1
                bgFade: true, // use fade effect
                bgOpacity: .3, // fade opacity
                onChange: updateInfo,
                onSelect: updateInfo,
                onRelease: clearInfo
            }, function(){

                // use the Jcrop API to get the real image size
                var bounds = this.getBounds();
                boundx = bounds[0];
                boundy = bounds[1];

                // Store the Jcrop API in the jcrop_api variable
                jcrop_api = this;
            });
        };
    </script>

非常感谢!

Answer 1

正如 Evan Trimboli 所说，部分问题在于您为 aspectRatio 传递字符串而不是数字。

另一部分是，仅当用户单击下拉列表时才设置 SIZEVARIABLE 属性，因此在此之前它是未定义的。此外，对于单击的选择来说，使用change事件更好。

当下拉列表更改时，您需要做的实际上是调用不同的方法来更新 JCrop 的 aspectRatio 选项。

    <select name="size" id="size">
        <option value="">Please select the size of your canvass</option>
        <option value="1/1">1x1</option>
        <option value="1/2">1x2</option>
        <option value="1/3">1x3</option>
        <option value="1/4">1x4</option>
        <option value="1/5">1x5</option>
        <option value="1/6">1x6</option>
    </select>

<script language="Javascript">
$('select[name=size]').change(function () {
    MethodTwo($(this).val());
});

function MethodTwo(aspectRatioStr) {
    var parts = aspectRatioStr.split('/'),
        num = parseInt(parts[0]),
        denom = parseInt(parts[1]),
        newAspectRatio = num / denom;
    if (!jcrop_api) return;
    jcrop_api.setOptions({
        aspectRatio: newAspectRatio
    });
    jcrop_api.focus();
}

// initialize Jcrop
$('#preview').Jcrop({
    minSize: [32, 32], // min crop size
    aspectRatio: 1, // start off with aspect ratio 1:1
    bgFade: true, // use fade effect
    bgOpacity: .3, // fade opacity
    onChange: updateInfo,
    onSelect: updateInfo,
    onRelease: clearInfo
}, function () {

    // use the Jcrop API to get the real image size
    var bounds = this.getBounds();
    boundx = bounds[0];
    boundy = bounds[1];

    // Store the Jcrop API in the jcrop_api variable
    jcrop_api = this;

    MethodTwo($('#name').val());
});
</script>