cropper not taking initial parameters into account

Created on 3 Feb 2016 · 5Comments · Source: fengyuanchen/cropper

HI I'm trying to understand what I'm doing wrong here or if my understanding of this library is fundementally wrong. I'm trying to make a cropper with 3 different sizes. The user is suppose to be able to switch sizes. The cropper container is the same size as the biggest photo, 560px width, 490px height. I initialize the cropper like this:

$('#img-draggable').cropper({ data: data, dragMode: 'move', minCanvasWidth: 560, minCanvasHeight: 490, minCropBoxWidth: 560, minCropBoxHeight: 490, cropBoxResizable:false, cropBoxMovable:false, guides:true, modal: true, highlight: true });
However this does not give me a crop box of width: 560, height: 490. It gives me a cropbox of something like width:490. height: 330. Is the cropbox being limited depending of the size of the container? so the container actually needs to be bigger?

Here is a screenshot. What I want is the picture to fill out the whole container and the cropbox to cover the whole image.

Screenshot

Source

naglalakk

All 5 comments

You didn't use the minCropBoxWidth/Height in the right way. see #589.

fengyuanchen on 3 Feb 2016

👎1

Looking at the documentation I'm a bit confused.
minCropBoxWidth = The minimum width of the crop box.

But this is a reduced size depending on the container widht/height, or whatever width/height at least not the one you put in. I fail to see how this options is beneficial since it seems to disregard the values passed in completely.

I want 560px x 490px cropbox to be 560px wide and 490px height. I see what you are talking about in the other issue but I fail to see how the aspectRatio fixes this.

I could make the image 100% to fill in all the space, with aspectRatio:1 this would actually work for the image, but this doesn't change the fact that the cropbox size is not correct. I need it to be fixed so that the user cannot actually change the size of it, he should always be cropping from fixed sizes.

Is there no way for the cropbox to be exactly the same size as the container/canvas?

Thank you very much for a good work by the way :)

naglalakk on 3 Feb 2016

Just change the size of image container size in this example to 560 x 490, like this:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta http-equiv="x-ua-compatible" content="ie=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Cropper</title>
  <link rel="stylesheet" href="../assets/css/bootstrap.min.css">
  <link rel="stylesheet" href="../dist/cropper.css">
  <style>
    .container {
      width: 560px;
      height: 490px;
    }

    img {
      max-width: 100%;
    }
  </style>
</head>
<body>

  <div class="container">
    <h1 class="page-header">Cropper with full crop box</h1>
    <div>
      <img id="image" src="../assets/img/picture.jpg" alt="Picture">
    </div>
  </div>

  <!-- Scripts -->
  <script src="../assets/js/jquery.min.js"></script>
  <script src="../assets/js/bootstrap.min.js"></script>
  <script src="../dist/cropper.js"></script>
  <script>
    $(function () {
      $('#image').cropper({
        viewMode: 3,
        dragMode: 'move',
        autoCropArea: 1,
        restore: false,
        modal: false,
        guides: false,
        highlight: false,
        cropBoxMovable: false,
        cropBoxResizable: false
      });
    });
  </script>
</body>
</html>

fengyuanchen on 3 Feb 2016

👎1

@fengyuanchen thank you for this code. This gives the following results

Screenshot

Perfect for the width but the height is always less than intended. Is this padding on both sides something that cropper.js automatically puts on the cropper canvas?

This is my code

Javascript

function initCropper(data) {
    $('#img-draggable').cropper({
        viewMode: 3,
        dragMode: 'move',
        autoCropArea: 1,
        restore: false,
        modal: false,
        guides: false,
        highlight: false,
        cropBoxMovable: false,
        cropBoxResizable: false
    });
}

SCSS

/// Main container for article image cropper
.image-cropper {
  margin: 0 auto;
  background-color: rgb(0,0,0);
  margin-top: 10px;
  border: 1px solid black;
  width: 560;
  height: 490;
  z-index: 1;

  #img-draggable {
    max-width: 100%;
    max-height: 100%;
   }
}

HTML

    <div class="row">
        <div class="col-lg-12 text-center">
            <div id="cropper" class="image-cropper">
                <img id="img-draggable" data-original="{{ layout.images.0.original_image.pk }}" src="{{ layout.images.0.original_image.image.url }}">
                <div style="display:none;" id="headlines">
                    <h1 id="headline">{% if article.title %}{{ article.title }}{% endif %}</h1>
                    <h2 id="sub-headline">{% if article.sub_title %}{{ article.sub_title }}{% endif %}</h2>
                </div>
            </div>
        </div>

naglalakk on 3 Feb 2016

Sorry, I cannot help you any more.

fengyuanchen on 16 Feb 2016

👎6

Was this page helpful?

0 / 5 - 0 ratings