Question

Javascript很新，很沮丧我似乎无法解决这个问题，因为我知道答案将是非常基本的东西!!!

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

我想在运行Jcrop之前询问用户画布的大小，以便裁剪工具以固定的比例运行，具体取决于他们的表单选择

图像比率的正确格式需要是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事件更适合select的{{1}}。

更改下拉列表时需要执行的操作实际上是调用另一种方法来更新JCrop的click选项。

aspectRatio

Answer 2

您将aspectRatio作为字符串传递。它需要一个计算出的数字。

因此，您选择框中的值应为：

<option value="1">1x1</option>
<option value="0.5">1x2</option>
<option value="0.33">1x3</option>
<option value="0.25">1x4</option>

您还应该更改获取要使用的号码的代码：

var SIZEVARIABLE = parseFloat($('#size').val());

Javascript传递形式变量

2 个答案: