Fabricjs用白色裁剪/替换背景图像的一部分

Question

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

有4种可能性：

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

前两种可能性：图像被切成[[垂直，并保留左侧部分 OR <（在图像中切换白色和黄色）图片上方）。另一部分变成白色背景。

其他两种可能性

：图像被[水平]剪切，并且保留

顶部

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是否可以达到目标？
（

---

否则我该怎么办？）

我需要将图像加载为画布，将其切成两半，然后将切下的部分替换为白色背景色。有4种可能性：*（黄色=剩余图像，白色=白色背景）...

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

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

Answer 1