Fabric.js 创建动态图像遮罩

Question

我想使用 alpha mask image 来屏蔽原始图像。我可以使用以下代码对图像进行 alpha 遮罩。但是我想用画笔编辑蒙版，我该怎么做？

理论上如果我把面具涂成白色它应该是不透明的，如果我把它涂成黑色它应该是透明的。

我试过的代码：

window.onload = function () {
        var img = document.getElementById("mask");
        var canvas = document.getElementById("canvas");
        var ctx = canvas.getContext("2d");
        canvas.width = img.naturalWidth;
        canvas.height = img.naturalHeight;
        ctx.drawImage(img, 0, 0);

        var idata = ctx.getImageData(0, 0, canvas.width, canvas.height);
        var data32 = new Uint32Array(idata.data.buffer);
        var i = 0, len = data32.length;
        while (i < len) data32[i] = data32[i++] << 8;
        ctx.putImageData(idata, 0, 0);


        ctx.globalCompositeOperation = "source-in";

        const defaultImg = document.getElementById('img');
        ctx.drawImage(defaultImg, 0, 0);

    };

    .container {
            text-align: center;
        }

<div class="container">
    <p>Default Image </p>
    <img id="img" crossorigin="anonymous" src="https://i.ibb.co/FhgZgzN/cat.png">

    <p>Mask </p>
    <img id="mask" crossorigin="anonymous" src="https://i.ibb.co/NswxsLc/cat-mask.png">

    <p>Result </p>:
    <canvas id="canvas"></canvas>
</div>

Answer 1

您可以使用 FabricJS 启用蒙版绘制。我在 MockoFun graphic designer.

中完成了此操作

Github 上有关于此的讨论：https://github.com/fabricjs/fabric.js/issues/6465#issuecomment-1127690007

创建一个扩展 PencilBrush 的新画笔 (https://github.com/fabricjs/fabric.js/blob/master/src/brushes/pencil_brush.class.js)

为此笔刷添加 2 个选项：

targetMaskFilter - 存储对 BlendImage 过滤器的引用
从蒙版图像source-over或destination-over到remove/add的模式

想法是使用画笔在蒙版层上绘制，然后使用 BlendImage 滤镜将蒙版与原始图像结合起来。

这里有一个要点展示了我的实现：https://gist.github.com/codingdudecom/ba183221d705a23962fcfcd3cae0c63f

Fabric.js 创建动态图像遮罩

Fabric.js create dynamic image mask

javascript

canvas

mask

fabricjs