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

Question

I am currently building and image upload and crop feature on a website. the work flow is as follows

1.upload button is pressed. 2.A modal opens with an upload box

code for modal:

<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. click the browse button and select a photo, this instantly triggers an ajax request to upload the image and return the path to it.

server side code:

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. On ajax success I load the resulting image into a div and show this in the modal.

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");
    });

I also have two functions that reset the modal if it is canceled, this just hides the image and shows the upload box.

This all works as it should but my problem is that i want to apply Jcrop to the image that is generated. I have tried many things

in the ajax success funtion i added this

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

The above works the first time but if the modal is closed and then the user tries again it doesn't replace the old image with the new one.

I tried adding

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

This is the same as the last option, works the first time but doesn't work after that.

I have tried

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

then adding this to my ajax success

image.Jcrop()

and adding this to the closing functions

image.destroy()

This is the same as the last time where it wors the first time and detroy() throws an error in the console.

JavaScript isn't my strong point and i'm quite stuck on this now, can anyone help?

Answer 1

Resolved this using the code below:

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

then when closing the modal i call

jcrop_api.destroy()