javascript - 更改 jcrop 选择的大小

Question

当用户输入宽度和高度并单击提交时，我正在尝试调整 jcrop 的选择框。

我在这里举了一个例子:http://pixelbypixel.comli.com/jcrop/

jcrop 插件在这里:http://deepliquid.com/projects/Jcrop/demos.php

如果用户点击提交，选择框会获取用户指定的宽度和高度进入，但在用户尝试移动框后，它变回提交之前的大小。

这是我为此编写的代码:

/* jcrop when page loads */
var jcrop_api;
function initJcrop(oImg){
        oImg.Jcrop({},function(){
           jcrop_api = this;
           jcrop_api.animateTo([100,100,400,300]);
        });
    };      
jQuery(function(jQuery){
    initJcrop(jQuery('#jcrop_target'));
});

/* box number when page loads */
function showCoords(c){
    jQuery('#w').val(c.w);
    jQuery('#h').val(c.h);
};

/* size when submit */
jQuery('.update-size').click(function(){
    var ancho = jQuery('#w').val();
    var altura = jQuery('#h').val();
    jQuery('.jcrop-holder > div:nth-child(1)').css('height', altura);
    jQuery('.jcrop-holder > div:nth-child(1)').css('width', ancho);
});

这是标记:

<img src="img/test.jpg" id="jcrop_target">
<div>
    <p>Define your own dimensions in CM:</p>
    <form>
        <label>Width: <input type="text" size="4" id="w" name="w" value="360"></label>
        <label>Height: <input type="text" size="4" id="h" name="h" value="360"></label>
        <a href="javascript:void(0)" class="update-size">submit</a>
    </form>
</div>

知道这里的问题是什么吗？

Answer 1

在提交事件时，您需要像这样设置 jCrop 的“setSelect”属性:

jcrop_api.setSelect([0,0,ancho,altura]);

看看这个例子，你会得到更多的想法: http://deepliquid.com/projects/Jcrop/demos.php?demo=advanced