Fabri cjs обрезать / заменить часть фонового изображения на белый

Question

Мне нужно загрузить изображение как холст, разрезать его пополам и заменить вырезанную часть белым цветом фона.

Есть 4 варианта :

* (Желтый цвет = оставшееся изображение, белый цвет = белый фон)

Первые две возможности : изображение обрезается по вертикали и мы оставляем левую часть ИЛИ правую часть (поменяйте белый и желтый цвет на изображении выше) изображения. Другая часть становится белым фоном.

Другие две возможности : изображение обрезано по горизонтали и мы сохраняем верхнюю часть ИЛИ нижнюю часть (переключите белый и желтый цвет на изображении выше) изображения. Другая часть становится белым фоном.

---

Что я пробовал:

fabric.Image.fromURL(imageUrl, img => {
    this.canvas.setBackgroundImage(img, this.canvas.renderAll.bind(this.canvas), {
        left: img.getScaledWidth()/2,
        originX: 'left'
    });

    this.canvas.setWidth(img.getScaledWidth());
    this.canvas.setHeight(img.getScaledHeight());
    this.canvas.renderAll();
}, { crossOrigin: 'Anonymous' });

Две проблемы:

• Оставшееся изображение находится в изнанка
• Другая часть прозрачная вместо белого фона

---

Можно ли этого достичь с помощью Fabri cjs? ( Иначе как мне это сделать? )

Answer 1

Я думаю, вы можете использовать для этого группу элементов canvas. Я создал пример, вы можете увидеть его здесь

https://codesandbox.io/s/mystifying-curran-bkwtk?file= / src / index. js

Answer 2

С помощью @ Raman вот решение:

fabric.Image.fromURL(imageUrl, img => {
    let rect;

    // Remaining image = right
    rect = new fabric.Rect({
        width: img.getScaledWidth() / 2,
        height: img.getScaledHeight(),
        fill: 'white'
    });

    // Remaining image = left
    rect = new fabric.Rect({
        width: img.getScaledWidth() / 2,
        height: img.getScaledHeight(),
        fill: 'white',
        left: img.getScaledWidth() / 2
    });

    // Remaining image = bottom
    rect = new fabric.Rect({
        width: img.getScaledWidth(),
        height: img.getScaledHeight() / 2,
        fill: 'white'
    });

    // Remaining image = top
    rect = new fabric.Rect({
        width: img.getScaledWidth(),
        height: img.getScaledHeight(),
        fill: 'white',
        top: img.getScaledHeight() / 2
    });

    const group = new fabric.Group([img, rect]);

    this.canvas.setBackgroundImage(group);

    this.canvas.setWidth(img.getScaledWidth());
    this.canvas.setHeight(img.getScaledHeight());
    this.canvas.renderAll();
}, { crossOrigin: 'Anonymous' });