javascript - CropperJS Not working well when using it in modal - Stack Overflow

admin管理员组

文章数量:1405544

I am building a list of images that can be modified through a boostrap modal using Cropper js.

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

And here is the script i've e up with to get the img src and pass it to the image tag inside the modal so Cropper can use it. I've also added some logic to upload it to my server.

$('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'
          }
        })
      })
    })
  });

The problem i'm getting is when i click the "edit" Button after the page is loaded, the modal shows up but Cropper doesn't start. If i close it and open it again, Cropper starts properly and I can crop my image and upload it. I'm just a beginner with jquery and all so maybe i can get any advice and help on this !

I am building a list of images that can be modified through a boostrap modal using Cropper js.

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

And here is the script i've e up with to get the img src and pass it to the image tag inside the modal so Cropper can use it. I've also added some logic to upload it to my server.

$('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'
          }
        })
      })
    })
  });

The problem i'm getting is when i click the "edit" Button after the page is loaded, the modal shows up but Cropper doesn't start. If i close it and open it again, Cropper starts properly and I can crop my image and upload it. I'm just a beginner with jquery and all so maybe i can get any advice and help on this !

• javascript
• jquery
• express
• cropperjs

Share Improve this question Follow edited Jan 23, 2020 at 15:40 Tekyy asked Jan 23, 2020 at 15:14 TekyyTekyy 8311 silver badge88 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5

I figured it out ! I have been struggling to find a way to initialize the cropper after updating my
<img id="image ...> which was being tough.

What i ended up doing is destroying the cropper first and then initialize it again.

$('#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);
    }
  })

Really was a dumb mistake from my part, but hoping this could help someone in the future !

You need to destroy() your initialized cropper right before reinitializing it. Don't do it in the function of closing your modal.

本文标签： javascriptCropperJS Not working well when using it in modalStack Overflow