裁剪器不在画布上显示第二张图像

Question

jquery裁剪器出现问题。 对于从输入type =“ file”中加载的第二个图像，所选图像不会显示在画布上。

以下方法不能解决我的问题。

1. $（）。cropper（“ destroy”）;
2. $（）。cropper（“替换”）;

第一次加载的图像没有问题。问题刚刚加载了第二张图片。

除了第二张加载的图像未放置在画布上之外，所有部件都可以正常工作了。

我的问题在哪里？

我自己无法修复。

另请参见以下示例：https://jsfiddle.net/dgnzcn/2t46mzod/14/

    $("#dosya").on("change", function(e) {
       
      var _URL = window.URL || window.webkitURL,
          file = this.files[0],                   
          image = new Image();
          image.src = _URL.createObjectURL(file);    
          image.onload = function(e) {
            var image = document.getElementById('image'),
            button = document.getElementById('kaydet');
        $('#image').attr('src',  _URL.createObjectURL(file));
        $('#image').show();
        $('#kaydet').show();
        var cropper = new Cropper(image, {

            viewMode: 1,

          ready: function () {
     
            croppable = true;
            button.onclick = function () {
              var croppedCanvas;
              var roundedCanvas;
              var roundedImage;
                
              if (!croppable) {
                return;
              }
        
              croppedCanvas = cropper.getCroppedCanvas();
              cropper.getCroppedCanvas({
                fillColor: '#fff',
                imageSmoothingEnabled: true,
                imageSmoothingQuality: 'high',
              });
       
              roundedCanvas = getRoundedCanvas(croppedCanvas);
  
              roundedImage = document.createElement('img');
              roundedImage.src = roundedCanvas.toDataURL('image/jpeg',0.5);
              base64Gorsel.innerHTML = '';
              base64Gorsel.appendChild(roundedImage);
              $("input[name='base64dosya']").val(base64Gorsel.innerHTML);   

            }
                       

          }
            
        });
      }
    }); 

     <link rel="stylesheet" href="https://fengyuanchen.github.io/cropperjs/css/main.css">
      <link rel="stylesheet" href="https://fengyuanchen.github.io/cropperjs/css/cropper.css">
     
    <img class="img-fluid" id="image">
            <div class="col-md-6">
                <div class="col-md-10 p-2">
                    <form onsubmit="return false;" id="SayfaYukleForm" enctype="multipart/form-data">
                        <h5 class="text-center text-info">Yeni ekleme</h5>                      
                        <fieldset>
                            <div class="form-group">
                                <input type="file" class="form-control-file form-control-file-sm" id="dosya" required accept="image/*">

<span style="" name="base64" id="base64Gorsel"></span>

 <input type="hidden" name="base64dosya"></div>                    
   
<div class="form-group text-right">

<button id="kaydet" type="submit" class="btn btn-primary btn-sm">Kaydet</button>
                            </div>
                        </fieldset>
                    </form>
                </div>
            </div>
            <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
      <script src="https://fengyuanchen.github.io/cropperjs/js/cropper.js"></script>
    <script src="https://fengyuanchen.github.io/cropperjs/js/main.js"></script>