javascript - 如何使用裁剪插件避免透明背景

我正在使用此裁剪工具https://github.com/fengyuanchen/cropper/。我有一个问题，如果我动态添加图像，则图像周围会有一些透明背景。因此，图像不适合容器，也可以在图像周围裁剪。我按照文档上的示例尝试摆脱透明背景，但没有成功。

这是我的代码:

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

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
           }
        );
    },
})

我试图这样做:https://github.com/fengyuanchen/cropper#setcanvasdatadata但什么也没发生

您可以在此处查看示例:

图片的自然尺寸为1920x1200

这是添加图像后生成的:

那么，有没有人建议如何去除透明背景并使图像适合容器？

最佳答案

我有完全一样的问题。在Cropper文档中，说要设置img max-width = 100％。我做到了，它解决了问题

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! */
}