Как подключить библиотеку CROPIT и настроить у себя на сайте?

Мне нужно подключить эту библиотеку scottcheng.github.io/cropit . Это я сделал, но теперь мне нужно чтобы это изображения которое я обрезаю, потом передавалось через AJAX запрос либо же через XMLHttpRequest, ну а там соответственно записывало название изображения и само изображение добавляло на сервер.

<form id="addForm" method="POST" enctype="multipart/form-data">
    <input name="title" type="text" placeholder="Название">
    <div class="image-editor">
        <input type="file" name="img" class="cropit-image-input">
        <!-- .cropit-image-preview-container is needed for background image to work -->
        <div class="cropit-image-preview-container">
            <div class="cropit-image-preview"></div>
        </div>
        <div class="image-size-label">
            Resize image
        </div>
        <input type="range" class="cropit-image-zoom-input">
    </div>
    <input id="sentAdd" type="submit" value="Добавить">
    <span id="result_sent"></span>
</form>

<script>
    $("#sentAdd").click(function(e){
        e.preventDefault();

        var imageData = $('.image-editor').cropit('export', {
            type: 'image/jpeg',
            quality: .9
        });

        $.confirm({
            'title'		: 'Вы уверенны что хотите добавить статью ?',
            'buttons'	: {
                'Да'	: {
                    'class'	: 'yes',
                    'action': function(){

                        var forms = $('#addForm');
                        var result = $('#result_sent');

                        var form = document.forms.addForm;
                        var formData = new FormData(form);

                        var img = new FormData(imageData);

                        var xhr = new XMLHttpRequest();
                        xhr.open("POST", "/php/addPP.php");

                        xhr.onreadystatechange = function() {
                            if (xhr.readyState == 4) {
                                if(xhr.status == 200) {
                                    data = xhr.responseText;
                                    if(data == 1) {
                                       alert(imageData);

                                    } else {
                                        result.html('<b id="red_res">Ошибка! Вы что то сделали не так</b>');
                                        result.find('b').delay(2000).fadeOut(500);
                                    }
                                }
                            }
                        };
                        xhr.send(formData, img);
                    }
                },
                'Нет'	: {
                    'class'	: 'no',
                    'action': function(){}
                }
            }
        });
    });
</script>