Canvas.toBlob () показывает ноль при загрузке второго изображения при использовании библиотеки cropper js от fengyuanchen

Question

Я использую эту библиотеку для обрезки изображения до того, как пользователь загрузит его изображение в свой профиль.

Но после загрузки второго изображения функция canvas.toBlob() возвращает ноль, и пользователь не смог загрузить новое изображение .

Код, который я использовал.

var image = document.getElementById("image");
var input = document.getElementById("customFileUpload");
var $alert = $(".alert");
var $modal = $("#modal");
var cropper;
input.addEventListener("change", add_image_cropped);
function add_image_cropped(event) {
  var files = event.target.files;
  var done = function(url) {
    input.value = "";
    image.src = url;
    $alert.hide();
    $modal.modal("show");
  };
  var reader;
  var file;
  var url;

  if (files && files.length > 0) {
    file = files[0];

    if (URL) {
      done(URL.createObjectURL(file));
    } else if (FileReader) {
      reader = new FileReader();
      reader.onload = function(e) {
        done(reader.result);
      };
      reader.readAsDataURL(file);
    }
  }
  var cropper;
  var options;
  $modal
    .on("shown.bs.modal", function() {
      debugger;
      cropper = new Cropper(image, {
        aspectRatio: 1,
        viewMode: 3,
        strict: false,
        cropBoxResizable: false,
        dragMode: "move",
        built: function() {
          var container = $(this).cropper("getContainerData");
          var cropBoxWidth = 668;
          var cropBoxHeight = 226;

          $(this).cropper("setCropBoxData", {
            width: cropBoxWidth,
            height: cropBoxHeight,
            left: (container.width - cropBoxWidth) / 2,
            top: (container.height - cropBoxHeight) / 2
          });
        },
        ready() {
          console.log(this.cropper === cropper);
          console.log(this.cropper.getCroppedCanvas());
        }
      });
    })
    .on("hidden.bs.modal", function() {
      cropper.destroy();
      cropper = "";
    });

  document.getElementById("crop").addEventListener("click", function() {
    var canvas = "";
    debugger;
    $modal.modal("hide");

    if (cropper) {
      canvas = cropper.getCroppedCanvas({
        width: 160,
        height: 160
      });
      debugger;
      $alert.removeClass("alert-success alert-warning");
      canvas.toBlob(function(blob) {
        var formData = new FormData();

        formData.append("cover_image", blob, "avatar.jpg");

        debugger;

        $.ajax("/user/event", {
          method: "POST",
          data: formData,
          processData: false,
          contentType: false,

          success: function() {
            $alert
              .show()
              .addClass("alert-success")
              .text("Upload success");
          },

          error: function() {
            // avatar.src = initialAvatarURL;
            $alert
              .show()
              .addClass("alert-warning")
              .text("Upload error");
          },
          complete: function() {
            // $progress.hide();
            // debugger;
            $("#customFileUpload").off();
          }
        });
      });
    }
  });
}