开源一个基于 Fabric.js 的图片蒙版标注画布组件

最近在做图片编辑平台时，画布这块踩了不少坑，顺手把核心的画布编辑器抽成了一个开源组件。

组件基于 **Fabric.js 6** 封装，React 18 + TypeScript 5.7，Tailwind CSS。核心就是解决几个「看着简单、做起来烦」的问题：

## 技术实现

**画笔 / 橡皮擦** — 画笔用 Fabric 自带的 `PencilBrush` 画半透明蒙版；橡皮擦是自己实现的 `EraserBrush` 子类，用 `destination-out` 混合模式做**非破坏性擦除**——只擦掉蒙版数据，不动底下的原图。

**撤销 / 重做** — 每次笔画结束后把画布状态压进历史栈。在可缩放、可平移的画布上做撤销，难点在于坐标变换，稍不注意栈就乱了。

**缩放 / 平移** — 以视口为中心平滑缩放，做了下限防止画布消失。抓手工具拖拽时蒙版路径要实时同步，这块坐标变换比较绕。

**导出 PNG** — 一键把原图 + 所有蒙版路径合成导出成带时间戳的 PNG。

**画笔尺寸** — 1~100px 滑块，带实时 SVG 光标，笔画粗细所见即所得，不靠猜。

**响应式** — 用 `ResizeObserver` 自适应容器尺寸，支持 React children 自定义侧边栏，通过 `ref` 暴露 `reset()` / `setImage()` / `hasMask()` / `exportCanvasAsImage()` 等命令式 API。

## 已在生产环境验证

这个组件已经在 [pxdmd.com](https://www.pxdmd.com/) 上跑生产了——大图、频繁切换工具、极端缩放、移动端触摸这些边界情况都磨过一遍。在线 demo 也开着，不用注册不用装，直接上传图片就能试：

👉 [pxdmd.com/fabric-editor](https://www.pxdmd.com/fabric-editor)

代码开源在 GitHub（Apache 2.0）：[github.com/thehouseholdofshz/fabric-canvas-editor](https://github.com/thehouseholdofshz/fabric-canvas-editor)

---

原文链接：[点击查看](https://www.v2ex.com/t/1234040)