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

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

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

你应该在图片上调用它：

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

Answer 2

为了防止其他人遇到类似问题，我通过将 <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 3

我遇到了同样的问题，解决起来很简单。

您需要的一切是设置您的 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 4

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

Answer 5

不幸的是

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

还不够。这仅修复了顶部和底部为空的 space 问题。

我必须将 display: inline-block; 添加到我的容器中以夹住 canvas 和图像框：https://jsfiddle.net/h9ktgxak/

Answer 6

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

Answer 7

在 getCroppedCanvas 方法中使用 fillColor 选项另外，请确保使用完整的颜色名称 ('#ffffff') 而不是 ('#fff')

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

Answer 8

您可以设置选项：

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

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

How to avoid transparent background using cropping plugin

javascript

jquery

css

image

crop