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

【问题标题】：How to avoid transparent background using cropping plugin如何使用裁剪插件避免透明背景
【发布时间】：2015-06-13 08:05:27
【问题描述】：

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

这是添加图片后生成的：

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

【问题讨论】：

标签： javascript jquery css image crop

【解决方案1】：

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

你应该在图片上调用它：

... img.cropper({ ... 内置：函数（）{ img.cropper('setCanvasData', { 左：0，顶部：0，宽度：700，身高：700 }); } }); ...

【讨论】：

【解决方案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 可以验证这是否是他的问题。

【讨论】：

【解决方案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 .. 仅此而已！

【讨论】：

【解决方案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! */
}

【讨论】：

【解决方案5】：

不幸的是

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

还不够。这只修复了顶部和底部的空白问题。

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

【讨论】：

【解决方案6】：

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

【讨论】：

【解决方案7】：

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

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

【讨论】：

【解决方案8】：

您可以设置选项：

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

【讨论】：