Fabricjs crop/replace 部分背景图像为白色

Question

我需要加载一张图片canvas，将其切成两半，并将切下的部分替换为白色背景色。

有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' });

两个问题：

剩下的图片反面
另一部分是透明的而不是白色背景

是否可以使用 Fabricjs 实现？（否则我该怎么办？）

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' });

Fabricjs crop/replace 部分背景图像为白色

Fabricjs crop/replace part of background image with white

javascript

canvas

image

fabricjs

angular