JCrop和Ajax图像上传和裁剪（laravel 5，Jquery）

Question

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

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>

3. 单击浏览按钮并选择一张照片，这将立即触发ajax请求以上传图像并返回其路径。

服务器端代码：

Route::post('upload-profile-pic', function(){

$input['file'] = Request::file('upload');
$rules = ['file' => 'mimes:jpg,png,gif,jpeg'];

$validator = Validator::make(
    $input,
    $rules
);

if ($validator->fails())
    return 'false';

$identifier = str_random(20);
$image = Image::make(Request::file('upload'));
$image->encode('png')->save(public_path(). '/profile-images/temp/' . $identifier . '.png');

return $identifier;
});

4. 在ajax成功的情况下，我将生成的图像加载到div中，并以模式显示。

Javascript（Jquery）：

    $('input[type=file]').change(function () {

        $('#load').show();

        var formData = new FormData($('#profile-image-upload')[0])

        $('.upload-container').hide();

        $.ajax({
            type: 'POST',
            url: 'upload-profile-pic',
            data: formData,
            cache: false,
            contentType: false,
            processData: false,
            success: function (data) {
                $('#load').hide();
                console.log("success");
                if (data != 'false')
                    console.log(data)
                $("#large-image").attr('src', '/profile-images/temp/' + data + '.png');
                $('.image').show();
                if (data == 'false')
                    $('.upload-container').show();
                $('.error').show();
            },
            error: function (data) {
                $('#load').hide();
                console.log("error");
                console.log(data);
            }
        });
    });

    $('#myModal').on('hidden.bs.modal', function () {
        $('.error').hide();
        $('.upload-container').show();
        $('.image').hide();
        $('#profile-image-upload').trigger("reset");
    })

    $('.close-button').on('click', function () {
        $('.error').hide();
        $('.upload-container').show();
        $('.image').hide();
        $('#profile-image-upload').trigger("reset");
    });

我还有两个函数可以重置模式（如果已取消），这只会隐藏图像并显示上载框。

所有这一切都应该正常工作，但是我的问题是我想将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不是我的强项，我现在对此深感困惑，有人可以帮忙吗？

Answer 1

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

$("#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()