Как отправить на сервер изображение отредактированное через Cropper.js?

Question

[Дима Паутов]

Добрый день! Никак не могу понять, как загрузить уже отредактированное через Cropper.js изображение на сервер через ajax?

Есть у меня блок, с редактированием аватарки пользователя.

var
            cropper,
            cropperOptions = {
                preview: '.avatar',
                aspectRatio: 1 / 1
            };

        var
            avatarEditorModal = $('#avatarEditorModal').iziModal({
                history: false,
                width: 600,
                overlayColor: false,
                radius: false
            }),
            avatarEditorBox = $('#editAvatar'),
            avatarEditorImg = $('#editAvatarImg'),
            avatarEditorOpen = $('.edit_avatar');

        var uploadAvatar = $('.upload_photo');

        // Загрузка изображения через input
        function uploadAvatarInInput(input, callback){
            var reader = new FileReader();

            reader.readAsDataURL(input.files[0]);

            reader.onload = function(event) {

                avatarEditorImg
                    .attr('src', event.target.result)
                    .load(function(){

                       callback(avatarEditorImg);

                    });

            };
        }
        
        // Открыть редактор
        $(document).on('opened', avatarEditorModal, function(){
            cropper = new Cropper(avatarEditorImg[0], cropperOptions);
        });
        
        // Закрыть редактор
        $(document).on('closing', avatarEditorModal, function(){
            cropper.destroy();
        });

        // Загрузка аватара в через input
        uploadAvatar.on('change', function(){

            cropper.destroy();

            uploadAvatarInInput(this, function(img){

                cropper = new Cropper(img[0], cropperOptions);

            });

        });
        
        // Загружаем отредактированный аватар на сервер
        avatarEditorBox.on('submit', function(event){

            event.preventDefault();

            $().cropper('getCroppedCanvas').toBlob(function (blob) {
                var formData = new FormData();

                formData.append('croppedImage', blob);

                $.ajax({
                    url: '/path/to/file',
                    type: 'POST',
                    dataType: 'default: Intelligent Guess (Other values: xml, json, script, or html)',
                    data: formData,
                })
                .done(function(){
                    console.log("success");
                })
                .fail(function(){
                    console.log("error");
                });
            });

        });

Зашёл на офф. доку. Там описано тоже самое, но у меня вылазит ошибка

$(...).cropper is not a function