Кроппер не отображает второе изображение на холсте

Question

У меня проблема с jquery cropper. Для второго загруженного изображения из input type = "file" выбранное изображение не отображается на холсте.

Следующие методы не решают мою проблему.

1. $ () кадрирования ( "уничтожить");.
2. $ () кадрирования ( "заменить");.

Первое загруженное изображение не имеет проблем. В выпуске только второе загруженное изображение.

Все части работают без проблем на моей стороне, за исключением того, что второе загруженное изображение не помещается на холст.

Где моя проблема?

Я сам не могу это исправить.

также здесь для альтернативного примера: 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>