Fabricjs用白色裁剪/替换部分背景图像答案

【问题标题】：Fabricjs crop/replace part of background image with whiteFabricjs用白色裁剪/替换部分背景图像
【发布时间】：2020-08-15 20:21:21
【问题描述】：

我需要将图像加载为画布，将其切成两半，并将剪切的部分替换为白色背景色。

有4种可能性：

*（黄色=剩余图像，白色=白色背景）

前两种可能性：图像被垂直切割，我们保留左侧部分 OR 图像的>右侧部分（在上图中切换白色和黄色）。另一部分变成白色背景。

其他两种可能性：图像被水平切割，我们保留顶部或 >图像的>底部（在上图中切换白色和黄色）。另一部分变成白色背景。

我尝试过的：

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 实现这一目标？（否则我该怎么做？）

【问题讨论】：

标签： javascript angular image canvas fabricjs

【解决方案1】：

我认为您可以为此使用一组画布元素。我已经创建了一个例子，你可以在这里看到它

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

【讨论】：

谢谢它的帮助。我发布了一个完整的解决方案。

【解决方案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' });

【讨论】：