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

Question

我只想在通过 ajax 查询获得并更改的图像上使用 Jcrop。但我没有找到让这个脚本工作的方法。此时我的脚本如下所示：

 <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>

并且萤火虫说 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();
    });