Question

我只想在获得的图像上使用Jcrop，并使用ajax查询进行更改。但我找不到这个脚本的工作方式。此时我的脚本看起来像这样：

 <script>
    $(function () {

        function Jcrop_show_coords(c) { 
            $('#roi_X1').val((c.x).toFixed(1));
            $('#roi_Y1').val((c.y).toFixed(1));
            $('#roi_X2').val((c.x2).toFixed(1));
            $('#roi_Y2').val((c.y2).toFixed(1));
        };

        var jcrop_api; // Holder for the API
        $('#img_ref').Jcrop({
            trueSize: [100, 100], 
            setSelect:   [1.0, 1.0, 99.0, 99.0],
            onChange: Jcrop_show_coords,  
            onSelect: Jcrop_show_coords
        },function(){
            jcrop_api = this;
        });

        function get_img() {
            $.ajax({                                      
                url: '/ajax/get_img.php',
                type: "POST",
                data: {  idRef: $("#idRef").val() },
                dataType: 'json',
                success: function(resp) {
                    jcrop_api.setImage(resp.img);
                }
            });
        };

        $("#submit_data").on('click', function(){ 
            get_img();
        });
    });
</script>

并且firebug说jcrop_api在行中未定义：

jcrop_api.setImage(resp.img);

有关如何使其发挥作用的任何想法？

Answer 1

在Html中

 <img src="#" id="img_ref"/>

在JS中

   function get_img() {
        $.ajax({                                      
            url: '/ajax/get_img.php',
            type: "POST",
            data: {  idRef: $("#idRef").val() },
            dataType: 'json',
            success: function(resp) {
                $("#img_ref").attr("src",resp.imgpath);
                $('#img_ref').Jcrop({
                    trueSize: [100, 100], 
                    setSelect:   [1.0, 1.0, 99.0, 99.0],
                    onChange: Jcrop_show_coords,  
                    onSelect: Jcrop_show_coords
               });
            }
        });
    };

    $("#submit_data").on('click', function(){ 
        get_img();
    });

使用ajax查询设置和更改Jcrop图像

1 个答案: