javascript - キャッチされていない TypeError: null のプロパティ 'toDataURL' を読み取れません - Cropper JS

Question

以下のようなことを達成するためにjquery クロッパーを使用しています。ユーザーが入力をクリックするたびに、その画像がクロッパー キャンバスに送信されます。ユーザーがトリミングされた画像を保存すると、プレビュー ボックスに読み込まれ、クロッパー キャンバスがクリアされます。

これが私が達成しようとしているものです

しかし、これの問題は、これが最初の入力ファイルに対してうまく機能することです。しかし、次の入力で同じことをしようとすると、

キャッチされていない TypeError: null のプロパティ 'toDataURL' を読み取ることができません

初めてうまく機能したときに、なぜこれが起こっているのかわかりませんでした。

私のコードはここにあります。

$(document).ready(function() {
  $('Input[type="file"]').on('change', function(event) {
    var parent = $(this).closest('div');
    parent.addClass('isSelected');
    cropImage(URL.createObjectURL(event.target.files[0]), parent);
  })

})

function cropImage(blob, domElement) {
  var output = document.getElementById('change-profile-pic');
  output.src = blob;
  $('#change-profile-pic').cropper('destroy');
  var $croppedImage = $('#change-profile-pic')
  var result;
  result = $croppedImage.cropper({
    ready: function() {
      console.log('Cropper initialized');
    },
    aspectRatio: 1 / 1,
    crop: function(e) {}
  })


  $('#save').click(function(action) {
    domElement.find('img').attr('src', $croppedImage.cropper('getCroppedCanvas').toDataURL());
    domElement.removeClass('isSelected');

    result.cropper('destroy');
  })
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<div class="row mt-5">
  <div class="col-6">
    <div class="image-wraper">
      <input type="file" name="image">
      <div class="image-preview">
        <img src="" class="img-fluid">
      </div>
    </div>
    <div class="image-wraper">
      <input type="file" name="image">
      <div class="image-preview">
        <img src="" class="img-fluid">
      </div>
    </div>
    <div class="image-wraper">
      <input type="file" name="image">
      <div class="image-preview">
        <img src="" class="img-fluid">
      </div>
    </div>
  </div>
  <div class="col-6">
    <div class="crop-image-section">
      <img src="" id="change-profile-pic">
    </div>
    <button type="button" id="save" class="btn btn-primary">Save</button>

  </div>
</div>

ここで jsFiddleにコードを追加しまし た

誰が私が間違っているのか教えてください。ありがとう