I'm using this cropping tool /. I have this issue, that if I add an image dynamically there is some transparent background around the image. So the image does not fit the container and it also makes it possible to crop around the image. I followed the examples on the docs to try to get rid of the transparent background, but with no success.

here is my code:

<div id="imgWrap" style="max-height:400px;min-height:400px">
    <img id="img" src="" /> // Image gets added dynamically
</div>

the javascript

var reader = new FileReader(); 
reader.onloadend = function () {

var img = $('#imgWrap img');
img.attr('src', reader.result);

img.cropper({
    aspectRatio: 1 / 1,
    autoCropArea: 0.65,
    guides: false,
    strict: true,   
    highlight: false,
    responsive:true,
    dragCrop: false,
    movable: true,
    resizable: true,
    zoomable: true,
    touchDragZoom:true,
    rotatable: false,
    minCropBoxWidth:105,
    minCropBoxHeight:105,
    built: function () {
        // cropper-container is the element where the image is placed
        $('.cropper-container').cropper('setCanvasData', {
            left: 0,
            top: 0,
            width: 700,
            height: 700
           }
        );                                      
    },
})

I tried to this: but nothing happens

You can see an example here:

The natural size of the image is 1920x1200

This is what is generated after the image is added:

So, does anyone have a suggestion how to get rid of the transparent background and make the image fit the container?

I'm using this cropping tool https://github.com/fengyuanchen/cropper/. I have this issue, that if I add an image dynamically there is some transparent background around the image. So the image does not fit the container and it also makes it possible to crop around the image. I followed the examples on the docs to try to get rid of the transparent background, but with no success.

here is my code:

<div id="imgWrap" style="max-height:400px;min-height:400px">
    <img id="img" src="" /> // Image gets added dynamically
</div>

the javascript

var reader = new FileReader(); 
reader.onloadend = function () {

var img = $('#imgWrap img');
img.attr('src', reader.result);

img.cropper({
    aspectRatio: 1 / 1,
    autoCropArea: 0.65,
    guides: false,
    strict: true,   
    highlight: false,
    responsive:true,
    dragCrop: false,
    movable: true,
    resizable: true,
    zoomable: true,
    touchDragZoom:true,
    rotatable: false,
    minCropBoxWidth:105,
    minCropBoxHeight:105,
    built: function () {
        // cropper-container is the element where the image is placed
        $('.cropper-container').cropper('setCanvasData', {
            left: 0,
            top: 0,
            width: 700,
            height: 700
           }
        );                                      
    },
})

I tried to this: https://github.com/fengyuanchen/cropper#setcanvasdatadata but nothing happens

You can see an example here:

The natural size of the image is 1920x1200

This is what is generated after the image is added:

So, does anyone have a suggestion how to get rid of the transparent background and make the image fit the container?

• javascript
• jquery
• css
• image
• crop

8 Answers 8

You can set option:

aspectRatio: 1 / 1, // select area ratio 16:9, 4:3, 1:1, 2:3, free
viewMode: 3, // sketch image to fit the container

I had the exact same issue. In the Cropper doc it says to set the img max-width = 100%. I did this and it fixed the issue

https://github.com/fengyuanchen/cropper

/* Limit image width to avoid overflow the container */
img {
  max-width: 100%; /* This rule is very important, please do not ignore this! */
}

Setting background property of cropper object to false fixes this problem.

In case someone else gets a similar problem, I fixed mine by encasing the <img> its in own div. Cropper (at least in 2.0.1) defines the container with

      $cropper.css((this.container = {
    width: max($container.width(), num(options.minContainerWidth) || 200),
    height: max($container.height(), num(options.minContainerHeight) || 100)
  }));

and $container is created with this.$container = $this.parent(); so if you have padding, some other lines of code, etc it calculates its size along with those lines. Given the age of this though, I doubt OP can validate if that was his problem or not.

I had a same problem and solution was easy.

Everything what you need is setup your css height, width to your cropper selector instead of cropper but after init cropper. This is normal jQuery object and you call cropper init on him later. As latest thing you'll setup new visual variables.

var $area = $('div.crop-area-image');    // jquery object
    $area.cropper(options);              // init cropper
    $area.css({height: '300px'});        // setup css

voala .. thats all!

Unfortunatelly

/* Limit image width to avoid overflow the container */
img {
    max-width: 100%; /* This rule is very important, please do not ignore   this! */
}

is not enough. This only fixes top and bottom empty space issue.

I had to add display: inline-block; to my container to clamp canvas and image boxes: https://jsfiddle.net/h9ktgxak/

Use fillColor option in the getCroppedCanvas method Also, make sure to use full color name ('#ffffff') not ('#fff')

getCroppedCanvas({fillColor:'#ffffff'}).toBlob((blob) => {});

You call setCanvasData method on wrong element.

You should call it on the image:

...
img.cropper({
  ...
  built: function () {
    img.cropper('setCanvasData', {
      left: 0,
      top: 0,
      width: 700,
      height: 700
    });
  }
});
...