Как избежать прозрачного фона с помощью плагина обрезки

У меня была такая же проблема. В документе Cropper говорится, что для установки img mad-width = 100%. Я сделал это, и он исправил проблему

https://github.com/fengyuanchen/cropper

setCanvasData

Вы вызываете setCanvasDataметод на неправильном элементе.

Вы должны назвать это на изображении:

...
img.cropper ({
  ...
  built: function () {
    img.cropper ('setCanvasData', {
      left: 0,
      наверх: 0,
      ширина: 700,
      высота: 700
    });
  }
});
...

В случае, если кто-то другой сталкивается с подобной проблемой, я исправил мою, закрыв <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 может подтвердить, была ли это его проблема или нет.

У меня была такая же проблема, и решение было легко.

Все, что вам нужно, это настроить высоту css, ширину в селектор селектора вместо обрезки, но после init cropper. Это обычный объект jQuery, и вы вызываете его позже. Как последняя вещь, вы будете устанавливать новые визуальные переменные.

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

voala .. тот все!

Unfortunatelly

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