Cropper: Any way to fit the cropper container to the image size ?

[Wharenn]

Hi,

I'm trying to use this plugin to crop images on my website. However, I don't see how to force an exact fit of the cropper container to the format of my images. There is always a space at the left and right of the image that can be cropped on :

The cropper-wrap-box seems always slightly larger than the cropper-canvas one.
This lead to allow crop outside of the image which is what I don't want.

Am I missing an option or something ?

(I didn't forget to add the max-width: 100% directive)

Thank you :)

[fengyuanchen]

https://github.com/fengyuanchen/cropper/blob/master/docs/examples/responsive-container.html

[Wharenn]

Thanks for your reply, but I'm sorry to say this still does not work. Whatever the format of my image is, square, greater height or greater width, there is always these borders on left and right.

[OKNoah]

I don't see how that helps either.

[pedromamede]

Have the same "problem" and the responsive-container sample did not solve it.

[kamal0808]

Is there a solution to this?

[Wharenn]

Hi, I found a workaround for the unwanted spaces by increasing the size of the copper container (with the same ratio). This is still not a fix for me as I am not sure how it will behave on smaller screens. However I had other issues with negative coordinates (-1;-1) for the crop top left coordinate when the selection is stretched to the borders. Had to handle it server side to force it to 0.

[Necare]

Probably you don't need this anymore, but I was working on a project which integrate this library and dropzone.js and I just developed yesterday what you are asking for.

In my case, I needed to set a fixed values for width (900px) and height (600px) properties, for make sure the image is not too large and ruin my layout. First thing I do is to get the size (width and height) of the original image. After that I compare both values to obtain which is higher (width or height) so I can calculate the coefficient to re-scale the image to my stated values (900/600px).

var img = new Image(); 
img.src = dataURL; //dataURL is a base64 image data code previusly obtained.
img.onload = function(){
    //This is only for load the original image into my modal window, 
    //no real deal for this example.
    $("#crop_image").attr('src', dataURL);

        //When the image is loaded I get all the data of original image so I can compare 
    //and calculate the coeff.
    var coef = 0;
    img.width>img.height ? coef = calculateCoeff(img.width,"width") : coef = calculateCoeff(img.height,"height");

        //When I finally have the coefficient, then I create and load the cropper library.
    createCropper((coef*img.width),(coef*img.height));
}

This is the function to calculate the coefficient of reduction (just a simple rule of three):

function calculateCoeff(img_value, property){
    var x = 0;
    property=="width" ? x=900 : x=600;
    return ((x*100)/img_value)*0.01;
}

And this is the function to inicializate cropper library:

function createCropper(width, height){
    var image = document.getElementById('crop_image');
    var cropper = new Cropper(image, {
        viewMode: 2,
        aspectRatio: 2 / 3,
        movable: false,
        zoomable: false,
        minContainerHeight: height,
        minContainerWidth: width,
        minCanvasHeight: height,
        minCanvasWidth: width,
        preview: ".crop_preview",
        crop: function(e) {
                console.log(e.detail.x);
                console.log(e.detail.y);
                console.log(e.detail.width);
                console.log(e.detail.height);
                console.log(e.detail.rotate);
                console.log(e.detail.scaleX);
                console.log(e.detail.scaleY);
        }
    });
}

I hope this can help to you!

[fengyuanchen]

In short:

.img-container {
  /* Never limit the container height here */
  max-width: 100%;
}

.img-container img {
  /* This is important */
  width: 100%;
}

[mortal-fighter]

if it's still important for somebody setting viewMode: 1 in options helped me

[acelot]

Do not place any sibling elements next to image container!

<div class="img-container">
    <img src="..."/>
    <!-- DO NOT PLACE ANYTHING HERE -->
</div>

If you want to place any controls, place them into another div like this:

<div class="my-cropper">
    <div class="img-container">
        <img src="..."/>
    </div>
    <div class="controls">
        <!-- CONTROLS -->
    </div>
</div>

[BugDroid-Duarte]

I stil couldn´t apply any solution to my project, nothing works, any tip of something that i could be missing ?

[wsauvage]

Hi,
If somebody is still interested.
viewMode : 2
solve my problem.

[adnanganie]

Use this
cropper = new Cropper(image, {
viewMode:2,
aspectRatio: 2,
}

[yethuaungptu]

Please how to fix it @fengyuanchen

[u2u4u]

view this link:
https://stackoverflow.com/questions/42377243/how-to-set-crop-box-to-full-width-and-full-height-of-the-container-previewcropp
Put:
var contData = cropper.getContainerData(); //Get container data cropper.setCropBoxData({ height: contData.height, width: contData.width }) //set data
in ready event

[Rushanf]

Set the image width as

.img-container img {
  width: 100%;
}

And set options as followed

cropper = new Cropper(image, { viewMode: 3, aspectRatio: 1 }

[kramsram]

Set the image width as

.img-container img {
  width: 100%;
}

And set options as followed

cropper = new Cropper(image, { viewMode: 3, aspectRatio: 1 }

ViewMode 3 and aspect ratio seems to have an impact on how the image fills the canvas. Most others seem to not do much at all.

[pero5ar]

if it's a full sized image autoCropArea: 1 should do the trick, although it depends on your specific scenario.

[help-me-help-you]

https://github.com/fengyuanchen/cropper/blob/master/examples/responsive-container.html

https://fengyuanchen.github.io/cropperjs/examples/responsive-container.html

Updated link

[ashrafali-v]

I think viewMode: 0 will help to fit any image inside the cropper.

[ivansergeevichlobodyuk]

if it's a full sized image autoCropArea: 1 should do the trick, although it depends on your specific scenario.

good solution!!! without any hard codes and calculation sizes

[ncjoshi]

In coropper.js there is a variale
autoCropArea which is set to 80%
you can set it to 100%

[fengyuanchen]

@ncjoshi Just set the autoCropArea option to 1 (100%), default to 0.8 (80%).

[jeromesheerin]

I just edited the cropper.css file that is included as part of the plugin. and changed the css line as following:

Changed it from:
.cropper {
max-width: 700px;
}

to this:

.cropper {
max-width: 100%;
}

Fixed my problem straight away.

Make sure your surrounding divs are not restricting the width of the inner divs. (Use chrome/firefox inspect mode to see this)

[ozairasmat]

i think you should try like this

cropper = new Cropper(image, {

  viewMode: 2,
  autoCropArea: 1,
  center: true,
  restore: false,
  zoomOnWheel: false

});