CropperJS在模态中使用时不能正常工作

Question

我正在构建一个图像列表，可以通过一个启动模式修改使用Cropper。

 <% crop.forEach(function(crops) { %>
    <div class="card mb-4 box-shadow" style="margin-right: 1em;">
      <img data-enlargable class="card-img-top" src="/photos/cropped_images/<%= crops.cat_nom %>/<%= crops.nom %>"
        alt="<%= crops.nom %>" style="max-height: 255px; max-width: 348px; object-fit: contain; cursor: zoom-in;">
      <input type="hidden" id="dataImage" data-catname="<%= crops.cat_nom %>" data-idcrop="<%= crops.cropped_id %>">
      <div class="card-body">
        <h5 class="card-title"><%= crops.cat_nom %></h5>
        <p class="card-text"><%= crops.nom %></p>
        <div class="d-flex justify-content-between align-items-center">
          <div class="btn-group">
            <button type="button" name="edit" class="btn btn-sm btn-outline-secondary"
              data-path="/photos/cropped_images/<%= crops.cat_nom %>/<%= crops.nom %>"
              data-target="#modal" data-toggle="modal">Edit</button>
          </div>
        </div>
      </div>
    </div>
<% }) %>
    <div class="modal fade" id="modal" tabindex="-1" role="dialog" aria-labelledby="modalLabel" aria-hidden="true">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title" id="modalLabel">Cropper</h5>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
              <span aria-hidden="true">&times;</span>
            </button>
          </div>
          <div class="modal-body">
            <div class="img-container">
              <img id="image" src="" alt="Picture" style="max-width: 100%">
              <input type="hidden" id="dataGetter">
            </div>
          </div>

          <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
            <button type="button" class="btn btn-success" id="editCropToDb">Save</button>
          </div>
        </div>
      </div>
    </div>
  </div>

下面是我想出的脚本来获得img，并将它传递给模式内的图像标记，这样Cropper就可以使用它了。我还添加了一些逻辑将其上传到我的服务器。

$('button[name="edit"]').click(function (event) {
    var src = $(this).parents('.card').find('img').attr('src')
    var crop_id = $(this).parents('.card').find('input').data('idcrop')
    var cat_name = $(this).parents('.card').find('input').data('catname')
    $('#dataGetter').data('idcrop', crop_id)
    $('#dataGetter').data('catname', cat_name)
    $('#dataGetter').data('source', src)
    var image = document.getElementById('image');
    $('#image').attr('src', src)
  })


  window.addEventListener('DOMContentLoaded', function () {
    var image = document.getElementById('image');
    var cropBoxData;
    var canvasData;
    var cropper;
    console.log(image)
    $('#modal').on('shown.bs.modal', function () {
      cropper = new Cropper(image, {
        autoCropArea: 0.7,
        viewMode: 1,
        center: true,
        dragMode: 'move',
        movable: true,
        scalable: true,
        guides: true,
        zoomOnWheel: true,
        cropBoxMovable: true,
        wheelZoomRatio: 0.1,
        ready: function () {
          //Should set crop box data first here
          cropper.setCropBoxData(cropBoxData).setCanvasData(canvasData);
        }
      })
    }).on('hidden.bs.modal', function () {
      cropBoxData = cropper.getCropBoxData();
      canvasData = cropper.getCanvasData();
      cropper.destroy();
    })


    document.getElementById('editCropToDb').addEventListener('click', function () {
      var initialUrl
      var canvas
      var crop_id = $('#dataGetter').data('idcrop')
      var cat_name = $('#dataGetter').data('catname')
      console.log(crop_id + '/' + cat_name)

      if (cropper) { canvas = cropper.getCroppedCanvas() }
      image.src = canvas.toDataURL();
      canvas.toBlob(function (blob) {
        var formData = new FormData()
        formData.append('catname', cat_name)
        formData.append('crop_id', crop_id)
        formData.append('croppedImage', blob, 'croppedImage.png')
        $.ajax('cropped/edit', {
          method: "POST",
          data: formData,
          processData: false,
          contentType: false,
          success: function () {
            alert('Modification faite')
            location = '/cropped'
          },
          error: function () {
            alert('erreur')
            location = '/cropped'
          }
        })
      })
    })
  });

​

问题是当我在页面加载后点击“编辑”按钮时，模式会显示出来，但是Cropper没有启动。如果我关闭和再次打开它，克隆人启动正确，我可以裁剪我的图像和上传它。我只是一个使用jquery的初学者，所以也许我可以在这方面得到任何建议和帮助！

Answer 1

我想出来了！在更新我的

<img id="image ...>是个很难对付的人。

我最后所做的就是先销毁这个收割机，然后再初始化它。

$('#modal').on('shown.bs.modal', function () {
  $('#image').cropper('destroy')
  cropper = new Cropper(image, {
    autoCropArea: 0.7,
    viewMode: 1,
    center: true,
    dragMode: 'move',
    movable: true,
    scalable: true,
    guides: true,
    zoomOnWheel: true,
    cropBoxMovable: true,
    wheelZoomRatio: 0.1,
    ready: function () {
      //Should set crop box data first here
      cropper.setCropBoxData(cropBoxData).setCanvasData(canvasData);
    }
  })

从我的角度来说，这真的是一个愚蠢的错误，但希望这能对未来的人有所帮助！

Answer 2

在重新初始化它之前，您需要销毁()初始化的cropper。不要在关闭你的模式的功能中这样做。