toBlob canvas returns "is not a function"

Question

Im using this jQuery image cropper and I'm trying to send the crop image to the back end so after crop, I have to get the crop data (the result is canvas, using 'getCroppedCanvas') and then I tried to convert the canvas output to a blob

$("#image").cropper('getCroppedCanvas').toBlob(function (blob){})

but it throws me this error (refer below)

Uncaught TypeError: $(...).cropper(...).toBlob is not a function

Any help, clues, ideas, suggestions, recommendations to fix my issue please?

function readURL(input) {
    if (input.files && input.files[0]) {
        var reader = new FileReader();

        reader.onload = function (e) {
         $("#gallery_image").remove();
         $('input[name="image"]').next('#gallery_image').remove();
            $('input[name="image"]').after('<div id="gallery_image" style="margin-top:15px;"><div><img src="'+e.target.result+'" style="max-width:100%;" id="image"></div><div style="display:table;margin:15px auto 0px auto;"><button id="crop">Crop</button></div></div>');

            $(function () {
        var $image = $('#image');
        $image.cropper({
         viewMode: 1,
          dragMode: 'move',
          autoCropArea: 0.65,
          restore: false,
          guides: false,
          highlight: false,
          cropBoxMovable: false,
          cropBoxResizable: false,
          built: function () {
              $image.cropper('setCropBoxData', {
                width : 231,
                height : 180
              });
            // }
          }
        });
      });
        }

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

$('input[name="image"]').change(function(){
    readURL(this);
});

 $(document).on("click","#crop", function(e){
    e.preventDefault();
  $("#image").cropper('getCroppedCanvas').toBlob(function (blob) {
      $("form").append('<input type="hidden" name="image" value="'+blob+'">');
    });
 });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/cropper/2.3.0/cropper.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/cropper/2.3.0/cropper.min.js"></script>


<form>
  <input type="file" name="image">
</form>