cropper.js：超出了最大调用堆栈大小

Question

我在上传图像之前对其进行裁剪。我有这段代码，但发现错误如下：

cropper.js:725 Uncaught RangeError: 超出最大调用堆栈大小。

我需要一个解决方案。上传完成，但出现上述错误。请帮我解决这个问题。

我是 PHP 和 jQuery 的新手，所以我不明白为什么会发生这个错误。

<link href="https://fengyuanchen.github.io/cropperjs/css/cropper.css" />
<div class="col-md-4 mb-3">
  <label for="image">Select an image <b style="color:red">*</b></label>
  <button type="button" class="btn btn-sm btn-primary" id="trigger_upload"><i class="fa fa-upload"></i> Select file from here...</button>
  <input type="hidden" id="media" name="media" class="form-control" readonly />
  <input type="hidden" id="mediaType" name="mediaType" class="form-control">
  <input type="file" id="winnersliderImg" name="winnersliderImg" class="form-control d-none" accept="image/*">
</div>

<div class="modal fade" id="modal" tabindex="-1" role="dialog" aria-labelledby="modalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="modalLabel">Crop the image</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
         <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <div class="img-container">
          <img id="image" src="">
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
        <button type="button" class="btn btn-primary" id="crop">Crop</button>
      </div>
    </div>
  </div>
</div>
</div>
<!-- Main body end here -->
</div>
</div>
<script src="https://fengyuanchen.github.io/cropperjs/js/cropper.js"></script>

var minCroppedWidth = 500;
var minCroppedHeight = 60;
var maxCroppedWidth = 550;
var maxCroppedHeight = 70;

window.addEventListener('DOMContentLoaded', function() {
  var avatar = document.getElementById('avatar');
  var image = document.getElementById('image');
  var input = document.getElementById('winnersliderImg');
  var $modal = $('#modal');
  var cropper;
  
  $('[data-toggle="tooltip"]').tooltip();
  
  input.addEventListener('change', function(e) {
    debugger;
    
    $(".photoErr").text("");
    
    var files = e.target.files;
    var done = function(url) {
      input.value = '';
      image.src = url;
      $modal.modal('show');
    };
    
    var reader;
    var file;
    var url;    
    if (files && files.length > 0) {
      file = files[0];
      var fileType = file.type.split('/');
      $("#mediaType").val(fileType[0]);
      if (fileType[0] == 'image') {
        if (URL) {
          done(URL.createObjectURL(file));
        } else if (FileReader) {
          reader = new FileReader();
          reader.onload = function(e) {
            done(reader.result);
          };
          reader.readAsDataURL(file);
        }
      } else {
        $("#mediaType").val("");
        $(this).val("");
        $(".photoErr").text("Please upload an image or video!");
        return false;
      }
    }
  });
  
  $modal.on('shown.bs.modal', function() {
    cropper = new Cropper(image, {
      aspectRatio: 1,
      viewMode: 3,
      dragMode: 'move',
      minCropBoxWidth: 650,
      minCropBoxHeight: 150,
      cropBoxMovable: true,
      cropBoxResizable: false,
      data: {
        width: (minCroppedWidth + maxCroppedWidth) / 2,
        height: (minCroppedHeight + maxCroppedHeight) / 2,
      },
      crop: function(event) {
        var width = event.detail.width;
        var height = event.detail.height;
        if (width < minCroppedWidth || height < minCroppedHeight || width > maxCroppedWidth || height > maxCroppedHeight) {
          cropper.setData({
            width: Math.max(minCroppedWidth, Math.min(maxCroppedWidth, width)),
            height: Math.max(minCroppedHeight, Math.min(maxCroppedHeight, height)),
          });
        }
      },
    });
  }).on('hidden.bs.modal', function() {
    cropper.destroy();
    cropper = null;
  });
  
  document.getElementById('crop').addEventListener('click', function() {
    var initialAvatarURL;
    var canvas;
    if (cropper) {
      canvas = cropper.getCroppedCanvas({
        width: (minCroppedWidth + maxCroppedWidth) / 2,
        height: (minCroppedHeight + maxCroppedHeight) / 2,
      });
      initialAvatarURL = avatar.src;
      avatar.src = canvas.toDataURL();
      var byte_data = canvas.toDataURL().split(',');
      $("#media").val(byte_data[1])
    }
    $modal.modal('hide');
  });
});

$(document).ready(function() {
  $("#trigger_upload").click(function() {
    $('#winnersliderImg').trigger("click");
  });
  $("button[type='submit']").click(function() {
    var url = $("#mediaLink").val().trim();
    if (url != "" && !isValidUrl(url)) {
      $("#mediaLink").val("");
      $(".photoErr").text("Please enter an valid url");
      return false;
    }
  });
});