javascript - Fabricjs用白色裁剪/替换部分背景图像

问题描述

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

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

标签： javascriptangularimagecanvasfabricjs

javascript - Fabricjs用白色裁剪/替换部分背景图像

问题描述

解决方案

推荐阅读