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但没有任何反应

你可以在这里看到一个例子：

enter image description here

图像的自然尺寸为1920x1200

这是添加图像后生成的内容： enter image description here

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

Answer 1

我有完全相同的问题。在Cropper doc中，它说要设置img mad-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! */
}

Answer 2

您可以设置选项：

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

Answer 3

您在错误的元素上调用setCanvasData方法。

您应该在图片上调用它：

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

Answer 4

如果其他人遇到类似的问题，我通过将<img>封装在自己的div中来修复我的问题。 Cropper（至少在2.0.1中）使用

定义容器

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

和$ container是用this.$container = $this.parent();创建的，所以如果你有填充，其他一些代码行等，它会计算它的大小以及这些行。考虑到这个年龄，我怀疑OP可以验证这是否是他的问题。

Answer 5

我有同样的问题，解决方案很简单。

您需要的所有东西都是设置您的css高度，宽度到裁剪器选择器而不是裁剪器，但是在初始裁剪器之后。这是普通的jQuery对象，你稍后会调用cropper init。最新的事情是你会设置新的视觉变量。

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

voala ..就是这样！

Answer 6

可惜的是

function testErr(){

    var first = new Promise(
        (resolve, reject) => {
        if (1==1) {
            resolve();
        } else 
            reject();
    });


    var second = function(){
        var test=funcWithErr('aaa');
    }

    Promise.all([first])
        .then(second)
        .catch(err => { console.log('err: ' + err) }
)}


function funcWithErr(text){

    console.log ('here comes the error')  // line 114
    conXXXsole.log ('this is the error')  // line 115

    return text;
}

还不够。这只能解决顶部和底部空白问题。

我必须将/* Limit image width to avoid overflow the container */ img { max-width: 100%; /* This rule is very important, please do not ignore this! */ }添加到我的容器中以夹住画布和图像框：https://jsfiddle.net/h9ktgxak/

Answer 7

将background对象的cropper属性设置为false可解决此问题。

Answer 8

在getCroppedCanvas方法中使用fillColor选项另外，请确保使用全色名称（'#ffffff'）而不是（'#fff'）

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

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

8 个答案: