CropperJS 在模态中使用时效果不佳

Question

我正在构建一个图像列表，可以使用 Cropper js 通过 boostrap 模态进行修改。

 <% 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 src 并将其传递给模态内的图像标签，以便 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'
          }
        })
      })
    })
  });

我遇到的问题是当我在页面加载后单击 "edit" 按钮时，模式出现但 Cropper 没有启动。如果我关闭它并再次打开它，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

您需要在重新初始化之前销毁（）您的初始化裁剪器。不要在关闭模态的功能中这样做。

CropperJS 在模态中使用时效果不佳

CropperJS Not working well when using it in modal

javascript

jquery

express

cropperjs