Javascript JCrop和Ajax图像上传和裁剪（laravel5，Jquery）

我目前正在一个网站上建立和图像上传和裁剪功能。工作流程如下

1.按下上传按钮。 2.打开一个带有上载框的模式

模式代码：

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
    <div class="modal-content">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            <h4 class="modal-title" id="myModalLabel">Upload Profile Picture</h4>
        </div>
        <div class="modal-body">
            <div id="load" class="display-none" style="width:32px;margin:150px auto;"><img src="img/loading2.gif"></div>
            <div class="upload-container">
             {!! Form::open(['file' => true, 'Method' => 'POST', 'id' => 'profile-image-upload']) !!}

            <div class="alert alert-danger display-none error">
                <p>File must be an image</p>
            </div>

            <div class="form-group">
                {!! Form::label('upload', 'Upload Photo') !!}
                {!! Form::file('upload', ['id' => 'file-select', 'class' => 'form-control upload-box']) !!}
            </div>

            {!! Form::close() !!}
            </div>
            <div id="image-box" class="image display-none" style="text-align:center;">
                <img id="large-image" src="" style="max-width:100%;max-height:500px;display:inline-block;">
            </div>
        </div>
        <div class="modal-footer">
            <button type="button" class="btn btn-default close-button" data-dismiss="modal">Close</button>
            <button type="button" class="btn btn-primary">Save changes</button>
        </div>
    </div>
</div>

在ajax成功时，我将结果图像加载到一个div中，并在模式中显示

Javascript（Jquery）：

我也有两个功能，重置模式，如果它被取消，这只是隐藏图像和显示上传框

这一切都正常工作，但我的问题是我想将Jcrop应用于生成的图像。我试过很多东西

在ajax成功功能中，我添加了以下内容

$("#large-image").attr('src', '/profile-images/temp/' + data + '.png').Jcrop();

上述方法第一次起作用，但如果模式关闭，然后用户再次尝试，则不会用新图像替换旧图像

我试着加上

.done(fucntion(){
    $("#large-image").Jcrop(
});

这与上一个选项相同，第一次起作用，但之后不起作用

我试过了

var image = $("#large-image");

然后将此添加到我的ajax成功中

image.Jcrop()

并将其添加到关闭函数中

image.destroy()

这与上次相同，上次是第一次，detroy（）在控制台中抛出错误

---

JavaScript不是我的强项，我现在非常坚持这一点，有人能帮忙吗？

使用下面的代码解决了这一问题：

$("#large-image").attr('src', '/profile-images/temp/' + data['identifier'] + '.png').Jcrop({}, function () {
      jcrop_api = this;
      $('.modal-dialog').animate({width: ($('#large-image').width() + 50)});
});

然后当关闭模式时，我调用

jcrop_api.destroy()

---

使用以下代码解决此问题：

$("#large-image").attr('src', '/profile-images/temp/' + data['identifier'] + '.png').Jcrop({}, function () {
      jcrop_api = this;
      $('.modal-dialog').animate({width: ($('#large-image').width() + 50)});
});

然后当关闭模式时，我调用

jcrop_api.destroy()