Cropper plugin not removing dashed lines in viewwindow

Question

I'm using the cropper plugin (version 2.3.4) to crop images in a modal window. Everything seems to be working fine except when I use 'dashed: false' as an option, the dashed lines aren't removed.

Here is the small bit of code to initialize the cropper on the element

$('#imageToCrop').cropper({dashed: false, aspectRatio: 1/1});

Here is what it looks like in the window

FYI - I ran the exact code from the example on the website and I still see the dashed lines

$(".fixed-dragger-cropper > img").cropper({
  aspectRatio: 640 / 320,
  autoCropArea: 0.6, // Center 60%
  multiple: false,
  dragCrop: false,
  dashed: false,
  movable: false,
  resizable: false,
  built: function () {
    $(this).cropper("zoom", 0.5);
  }
});

<div class="modal" id="bootstrap-modal">
  <div class="modal-dialog">
    ...
    <div class="modal-body">
      <div class="bootstrap-modal-cropper">
        <img src="img/picture-1.jpg">
      </div>
    </div>
    ...
  </div>
</div>

Check the answer, it will work for you. – Prateek Feb 19 '18 at 17:45 — Prateek, Feb 19 '18 at 17:45

score 0 · Answer 1 · answered Feb 19 '18 at 17:43

The dashed lines are actually called Guides and the '+' mark is to show the center of the cropped area.

$(".fixed-dragger-cropper > img").cropper({
  aspectRatio: 640 / 320,
  autoCropArea: 0.6, // Center 60%
  multiple: false,
  dragCrop: false,
  guides: false, //removes dashed lines
  center: false, //removes + sign
  movable: false,
  resizable: false,
  built: function () {
     $(this).cropper("zoom", 0.5);
  }
});

Cropper plugin not removing dashed lines in viewwindow

1 Answers1