未捕获的TypeError：无法读取null的属性“ toDataURL”-Cropper JS

Question

我正在使用jquery cropper实现以下目标。只要用户单击输入，该图像就会发送到裁剪器画布。并且，一旦用户保存了裁剪的图像，它将被加载到预览框中并清除裁剪的画布。

这就是我要实现的目标

但是问题是，这对于第一个输入文件非常有用。但是，当我尝试对下一个通过

输入的内容进行相同操作时

  

未捕获的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 here

添加了代码

谁能告诉我我做错了什么。谢谢

Answer 1

请把你的脚本放在文档的底部，以便首先渲染画布。

所以这确实意味着您应该移动脚本。

<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>

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

这是我修改后的版本。