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

Question

我正在使用这个裁剪工具 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

这是添加图片后生成的:

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

Answer 1

我遇到了完全相同的问题。在 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! */
}