Fabri c JS clipPath: как разместить изображение на холсте после обрезки? - PullRequest
Новая
       62

Fabri c JS clipPath: как разместить изображение на холсте после обрезки?

1 голос
/ 23 марта 2020

Я реализовал обрезку изображения с помощью свойства Fabri cJS и clipPath.

Вопрос в том, как сделать изображение подходящим для холста после обрезки? Я хочу, чтобы обрезанное изображение заполнило область холста, но не могу понять, возможно ли это сделать с помощью fabri c js.

Поэтому я хочу, чтобы выбранная часть изображения соответствовала размеру холста после того, как пользователь нажимает кнопку «Кадрировать»:

Screenshot of the cropping example

О коде: я рисую прямоугольник на холсте, и пользователь может изменить его размер и переместить его. После этого пользователь может нажать кнопку «Обрезать» и получить обрезанное изображение. Но обрезанная часть остается того же размера, что и на исходном изображении, тогда как я хочу, чтобы она масштабировалась и соответствовала холсту.

Примечание : я пытался использовать такие методы, как scaleToWidth. Кроме того, я использовал для absolutePositioned значение true для прямоугольника выбора. Я попытался масштабировать изображение, установив для этого свойства значение false, но это не помогло.

Пожалуйста, не предлагайте использовать свойства cropX и cropY для обрезки вместо clipPath, поскольку они не не работает должным образом для повернутых изображений.

HTML: 

<button>Crop</button>
<canvas id="canvas" width="500" height="500"></canvas>

JS: 

// crop button
var button = $("button");

// handle click
button.on("click", function(){

  let rect = new fabric.Rect({
    left: selectionRect.left,
    top: selectionRect.top,
    width: selectionRect.getScaledWidth(),
    height: selectionRect.getScaledHeight(),
    absolutePositioned: true
  });

  currentImage.clipPath = rect;

  canvas.remove(selectionRect);

  canvas.renderAll();
});

var canvas = new fabric.Canvas('canvas');

canvas.preserveObjectStacking = true;

var selectionRect;
var currentImage;

fabric.Image.fromURL('https://www.sheffield.ac.uk/polopoly_fs/1.512509!/image/DiamondBasement.jpg', img => {
  img.scaleToHeight(500);

  img.selectable = true;

  canvas.add(img);

  canvas.centerObject(img);

  currentImage = img;

  canvas.backgroundColor = "#333";

  addSelectionRect();

  canvas.setActiveObject(selectionRect);

  canvas.renderAll();
});

function addSelectionRect() {
  selectionRect = new fabric.Rect({
    fill: 'rgba(0,0,0,0.3)',
    originX: 'left',
    originY: 'top',
    stroke: 'black',
    opacity: 1,
    width: currentImage.width,
    height: currentImage.height,
    hasRotatingPoint: false,
    transparentCorners: false,
    cornerColor: 'white',
    cornerStrokeColor: 'black',
    borderColor: 'black',
  });

  selectionRect.scaleToWidth(300);
  canvas.centerObject(selectionRect);
  selectionRect.visible = true;
  canvas.add(selectionRect);
}

Вот мой jsfiddle: https://jsfiddle.net/04nvdeb1/23/

...