1

我正在使用jquery cropper来实现下面这样的事情。每当用户单击输入时，该图像将被发送到裁剪器画布。一旦用户保存裁剪后的图像，它将被加载到预览框中并清除裁剪器画布。

这就是我想要实现的目标 在此处输入图像描述

但问题是，这对第一个输入文件很有用。但是当我尝试对下一个输入做同样的事情时

未捕获的类型错误：无法读取 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添加了代码

谁能告诉我我在哪里做错了。谢谢

4

1 回答 1

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>

这是我的修改版本。

于 2021-07-16T06:37:58.207 回答