# @anu3ev/fabric-image-editor 中文文档

规范地址：https://npmcn.com/package/%40anu3ev/fabric-image-editor/

版本：0\.14\.1
npm 元数据更新时间：2026-11-03T19:07:16.496Z
中文译文更新时间：2026-11-08T03:54:27.405Z
软件包许可：MIT

本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%40anu3ev/fabric-image-editor
原文对照：https://npmcn.com/package/%40anu3ev/fabric-image-editor/?lang=original
项目主页：https://anu3ev.github.io/image-editor
源码仓库：https://github.com/Anu3ev/image-editor

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：1.4 MB，210 个文件
- 模块格式：ES Module
- TypeScript 类型：包内自带
- Node.js 要求：\>=20\.0\.0
- 运行依赖：6 个
- 首次发布：2025-05-23T14:55:29.294Z
- 最新版本发布：2026-11-03T19:07:16.174Z
- 近 30 天下载量：1900（2026-10-06 至 2026-11-04，npm 官方下载统计）
- 已发布版本数：245（近 12 个月 166 个）

## 中文简介

TypeScript 图像编辑器库建立在 FabricJS上,允许您创建带有集成蒙太奇区域的实例,并提供用于修改和管理状态的API.

## 安装

```sh
npm install @anu3ev/fabric-image-editor
```

也可以使用：`pnpm add @anu3ev/fabric-image-editor`、`yarn add @anu3ev/fabric-image-editor`、`bun add @anu3ev/fabric-image-editor`

## README

# 配置图像编辑器

[![Unit Coverage](https://npmcn.com/package/%40anu3ev/fabric-image-editor/badges/coverage-total.svg)](https://github.com/Anu3ev/image-editor/actions/workflows/test.yml) [![npm version](https://img.shields.io/npm/v/%40anu3ev%2Ffabric-image-editor)](https://www.npmjs.com/package/@anu3ev/fabric-image-editor) [![Tests](https://github.com/Anu3ev/image-editor/actions/workflows/test.yml/badge.svg)](https://github.com/Anu3ev/image-editor/actions/workflows/test.yml) [![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg)](https://npmcn.com/package/%40anu3ev/fabric-image-editor/LICENSE)

**您可以在您的网络应用程序中构建一个图像编辑器 .**

让用户裁剪图像,添加文字和形状,用地层,再利用成分来工作,并导出结果. 以类型脚本和 [Fabric.js (法语)](https://fabricjs.com/),库中提供编辑工具,取消/重做,并通过API恢复状态,您可以连接到自己的界面.

🚀 **[现场直播](https://anu3ev.github.io/image-editor/)** • 妇女 [融合指南](https://npmcn.com/package/%40anu3ev/fabric-image-editor/guides/integration.md)

## 为何这个项目很重要

用户可以在不离开应用程序的情况下准备并修改图像.

综合编辑器适合哪些地方的例子:

| 您的申请 | 用户可以对集成编辑器做什么 |
| --- | --- |
| 电子商务管理 | 制作产品图像并附有标题、宣传标签和一致的布局. |
| CMS或出版工具 | 在撰写一篇文章或一页时裁剪并作一插图. |
| 营销工具 | 重用已保存的成分并更改其文本、图像或背景 . |
| 带有 AI 图像生成的应用程序 | 在保存之前先编辑生成的图像 。 应用程序提供AI服务. |

## 由此库所建

![Production inSales Vue image editor with reusable templates and a product composition](https://npmcn.com/package/%40anu3ev/fabric-image-editor/assets/insales-editor-integration.jpg)

我建造了这个TypeScript/FabricJS库,并将其整合到InSales的制作Vue图像编辑器中. 我拥有前端的架构和执行,从准备的Figma设计中工作,并界定了与后端工程师的API合同.

图书馆提供画布编辑,历史,和系列化. 案件所显示的产品特有Vue接口,后端和AI功能属于主机应用程序,不包含在npm包中.

[LinkedIn 上的更多项目细节](https://www.linkedin.com/in/alexander-s-anufriev/details/projects/)

## 在行动中看到它

现场演示演练通过公共API曝光的相同工作流程.

### 作物流动

![Crop an image with a fixed ratio and a dimmed area outside the crop frame](https://npmcn.com/package/%40anu3ev/fabric-image-editor/assets/image-crop-example.gif)

### 层和历史

![Watch the layers and history demo](https://npmcn.com/package/%40anu3ev/fabric-image-editor/assets/layers-history-demo.gif)

### 文本样式

![Watch the text styling demo](https://npmcn.com/package/%40anu3ev/fabric-image-editor/assets/text-background-export-demo.gif)

## 招聘经理

该储存库展示了与下列机构的实际工作:

-   在画布运行时间之上构建的状态浏览器交互;
-   使用撤销/重做、序列化、模板恢复和导出进行编辑;
-   具有明确管理器所有权的模块化类型脚本架构;
-   为主机-应用程序集成而设计的公共API和事件;
-   诸如裁剪、选择、缩放、快取和文本编辑等交互重度情景的回归覆盖.

## 融合服务

我可以把这个编辑器整合到您的应用程序中,并适应您的工作流程.

这可以包括图像加载和保存,自定义工具,编辑器打开/关闭生命周期,以及应用程序中的错误处理.

我还在整合期间和发射后提供支助,包括排除故障、维护和进一步发展。 我们可以就你产品需求的范围和支持安排达成一致.

[通过链接联系我](https://www.linkedin.com/in/alexander-s-anufriev/) 讨论你的融合.

## \* 特性

### 核心编辑

-   **蒙太奇区** - 专门的工作空间,有精确收割区域
-   **扫描和图像裁剪** - 用于蒙太奇再生和光栅图像裁剪的互动作物模式
-   **多层支持** - 有订单、能见度和锁定的层管理
-   **历史系统** - 与州管理层完全撤销/重做
-   **丰富的文本编辑** - 有打字控制、大写转换和历史感更新的文本管理器
-   **对象转换** - 缩小、旋转、翻转、适应和规模操作
-   **专业工具** - 复制/粘贴、分组、选择和对齐

### 高级能力

-   **背景管理** - 颜色、多站梯度和图像背景
-   **图像导入/出口** - 进口PNG、JPEG、WebP和SVG;出口PNG、JPEG、WebP、SVG和PDF
-   **精确对齐** - 与蒙太奇边缘/中心及附近物体相接并配有可视取向和间隔探测器
-   **现场测量** - 坚持住 `Alt` 选择显示被徘徊物体或蒙太奇区域的相距向导
-   **网络工人整合** - 重型行动以背景线进行
-   **字体装入器** - FontManager 处理 Google 字体 + 自动自定义源 `@font-face` 登记
-   **可配置工具栏** - 动态工具栏,带有对上下文敏感的动作
-   **剪贴板集成** - 使用系统剪贴板的原生副本/粘贴支持
-   **删除警卫** - 应用程序定义的规则可以防止用户删除受保护对象
-   **克隆准备** - 应用程序可以在复制、粘贴、复制或剪接之前对对象克隆进行消毒

### 开发者特性

-   **类型脚本支持** - 包括全部类型定义
-   **模块结构** - 将关切与经理班级明确分开
-   **事件系统** - 为整合进行丰富的事件处理
-   **响应设计** - 适应不同的屏幕大小和容器
-   **测试基础设施** - 覆盖80%的测试套房

## \* 安装

```bash
npm install @anu3ev/fabric-image-editor
```

**所需经费:**

-   节点.js ≥ 20.0.0
-   国家防范机制
-   使用 ES2022 支持的浏览器和列表中的 API [浏览器支持](https://npmcn.com/package/%40anu3ev/fabric-image-editor/#readme--browser-support)

## QQ 快速启动

在页面上添加容器 :

```html
<div id="editor"></div>
```

装入容器后初始化编辑器 :

```typescript
import initEditor from '@anu3ev/fabric-image-editor'

/** Editor instance owned by this page or component. */
const editor = await initEditor('editor', {
  montageAreaWidth: 512,
  montageAreaHeight: 512,
  editorContainerWidth: '100%',
  editorContainerHeight: '600px',
  fonts: []
})
```

`fonts: []` 跳过默认字体下载。 打电话 `editor.destroy()` 当自有页面或组件被删除时.

见 [融合指南](https://npmcn.com/package/%40anu3ev/fabric-image-editor/guides/integration.md) 用于配置、图像导入/导出、文本、形状、裁剪和其他编辑操作.

### 图书馆语言

英文(`en`)和俄语(`ru`)被捆绑. 英语是默认的.

```ts
const editor = await initEditor('editor', { language: 'ru' })
```

用 `customLanguages`数字 :

```ts
import initEditor, { type EditorLocale } from '@anu3ev/fabric-image-editor'

const portuguese = {
  ui: { toolbar: { delete: 'Excluir', duplicate: 'Duplicar' } }
} satisfies EditorLocale

const editor = await initEditor('editor', {
  language: 'pt',
  customLanguages: { pt: portuguese }
})
```

见 [语文和翻译](https://npmcn.com/package/%40anu3ev/fabric-image-editor/guides/integration.md#language-and-translations) 用于可用密钥、倒置规则、部分超标和通知.

## XQ 演示应用程序

该寄存器包括一个用于尝试库操作的开发演示. 见 [从源头运行演示](https://npmcn.com/package/%40anu3ev/fabric-image-editor/CONTRIBUTING.md#run-the-demo-from-source) 用于本地设置.

访问演示 : **[https://anu3ev.github.io/image-editor/\* (英语)](https://anu3ev.github.io/image-editor/*)\* 联合国**

## 建筑

编辑器采用模块化架构,由专业管理人员组成:

### 核心管理员

-   **`ImageManager`** - 图像导入/导出、格式处理、PDF生成
-   **`CanvasManager`** - 建筑面积、规模和景点管理
-   **`HistoryManager`** - 有状态持久性的撤消/重写功能
-   **`TextManager`** - 文本对象创建、造型、大写处理和历史整合
-   **`LayerManager`** - 对象层,z-index管理,发送到后/前
-   **`BackgroundManager`** - 背景颜色、梯度和图像
-   **`CropManager`** - 用于蒙太奇再生和光栅图像收割的运行时作物模式
-   **`TransformManager`** - 对象转换、装配和缩放
-   **`ZoomManager`** - 缩小界限、进行适当的计算和平滑的取景口中心

### 工具管理员

-   **`SelectionManager`** - 对象选择和多选择处理
-   **`ClipboardManager`** - 复制/粘贴、剪切、复制、克隆准备和系统剪贴板集成
-   **`GroupingManager`** - 对象分组和未分组操作
-   **`DeletionManager`** - 删除对象、删除守护、删除事件和分组处理
-   **`ShapeManager`** - 有内部文本、布局、缩放和样式控制的基于预设的形状组
-   **`ObjectLockManager`** - 对象锁定和解锁功能
-   **`SnappingManager`** - 移动物体时的对齐向导和等距坐标
-   **`MeasurementManager`** - 异常低频触发相距向导,用于盘旋物体或蒙太奇区域
-   **`PanConstraintManager`** - 与缩放和蒙太奇界限相对的布局
-   **`WorkerManager`** - 为重型业务整合网络工人
-   **`FontManager`** - 通过 FontFace API 或倒置加载字体@ font-face 注射
-   **`ModuleLoader`** - 动态模块加载(jsPDF等)
-   **`ErrorManager`** - 应用程序处理错误和警告事件
-   **`TemplateManager`** (单位:千美元)`src/editor/template-manager/index.ts`) - 序列化并重新应用可选背景保存对象/组模板

### UI 组件

-   **`ToolbarManager`** - 有可配置动作的动态工具栏
-   **`CustomizedControls`** - 自定义FabricJS控制和互动
-   **`InteractionBlocker`** - 行动时UI屏蔽
-   **`AngleIndicatorManager`** - 在旋转选定对象时显示旋转角度徽章(通过 `showRotationAngle`(中文(简体) )
-   **`ObjectSizeIndicatorManager`** - 缩放时大小反馈(通过 `showObjectSizeOnScale`(中文(简体) )
-   **`ViewportScrollbarManager`** - 用于平面的视图端口滚动条(通过 `showViewportScrollbars`(中文(简体) )
-   **`CursorIndicator`** - 指针旁显示的数值共享指标

### 各部分如何合作

1.  初始化创建了管理器,加载了字体和初始内容,并建立了起始历史状态. `initEditor()` 等待时间 `editor.ready` 回来之前.
2.  一次UI行动呼叫相关经理. 该管理器协调几何,渲染,编辑事件,以及操作需要它们的历史.
3.  撤消/重写和模板应用程序恢复对象及其编辑器特定的行为. 文本和形状需要它们的布局和相互作用状态与它们的序列化属性同时得到恢复.
4.  裁剪框、向导和交互重叠是临时运行时间状态。 它们与保存或出口的成分分开.
5.  `destroy()` 释放实例的听众,工人,管理图像 URL,和UI资源. 该应用程序拥有其周边组件,API请求,并持续存储.

见 [查找代码的正确部分](https://npmcn.com/package/%40anu3ev/fabric-image-editor/CONTRIBUTING.md#find-the-right-part-of-the-code) 用于源入点和管理人员特定文件.

Jest覆盖了库行为; Playwright 练习浏览器交互. 覆盖徽章链接到单位测试工作流程.

## 发展

见 [捐款额](https://npmcn.com/package/%40anu3ev/fabric-image-editor/CONTRIBUTING.md) 用于本地设置、构建命令、类型检查、林入以及单位和浏览器测试.

### 项目结构

```text
src/
├── main.ts                         # Public initialization function and exported types
├── editor/
│   ├── index.ts                    # ImageEditor and manager ownership
│   ├── defaults.ts                 # Default editor options
│   ├── constants.ts                # Shared values and limits
│   ├── default-fonts.ts            # Default font definitions
│   ├── listeners.ts                # Browser and canvas event handling
│   ├── object-serialization.ts      # Shared object serialization properties
│   ├── background-manager/
│   ├── canvas-manager/
│   ├── clipboard-manager/
│   ├── crop-manager/
│   ├── customized-controls/
│   ├── deletion-manager/
│   ├── error-manager/
│   ├── font-manager/
│   ├── grouping-manager/
│   ├── history-manager/
│   ├── image-manager/
│   ├── interaction-blocker/
│   ├── layer-manager/
│   ├── measurement-manager/
│   ├── module-loader/
│   ├── object-lock-manager/
│   ├── pan-constraint-manager/
│   ├── selection-manager/
│   ├── shape-manager/              # Creation, layout, editing, scaling, and restoration
│   ├── snapping-manager/           # Guide rendering and interaction-specific snapping
│   ├── template-manager/
│   ├── text-manager/
│   ├── transform-manager/
│   ├── worker-manager/
│   ├── zoom-manager/
│   ├── types/                      # Options, events, fonts, and Fabric/browser types
│   ├── utils/                      # Shared geometry and browser utilities
│   └── ui/
│       ├── angle-indicator/
│       ├── cursor-indicator/
│       ├── object-size-indicator/
│       ├── toolbar-manager/
│       └── viewport-scrollbar-manager/
└── demo/                           # Development interface for exercising the API
    ├── index.html
    ├── style.css
    ├── js/                         # Demo initialization, controls, and listeners
    └── vendor/                     # Demo CSS dependencies
specs/
├── src/editor/                     # Jest unit tests
├── test-utils/                     # Shared test fixtures, mocks, and assertions
├── __mocks__/
└── setupTests.ts
e2e/
├── tests/                          # Playwright interaction scenarios
├── models/                         # Editor and manager-specific browser models
├── fixtures/                       # Test setup and scenario data
├── helpers/                        # Shared browser test support
├── types/                          # Shared browser test contracts
└── assets/                         # Local assets used by browser tests
guides/integration.md               # API usage and integration examples
CONTRIBUTING.md                     # Setup, builds, checks, and contribution workflow
assets/                            # README screenshots and GIFs
badges/                            # Checked-in coverage badge
scripts/build-declarations.mjs      # Package declaration assembly
.github/workflows/                  # Quality checks, publishing, and demo deployment
vite.config.*.js                    # Development, library, and demo builds
jest.config.ts
playwright.config.ts
tsconfig*.json
dist/                              # Generated npm library build
dev-build/                         # Generated development library build
docs/                              # Generated GitHub Pages demo
```

管理者的责任如上所述;其源目录包含执行内容,如果有,则包含更详细的README. `docs/` 正在构建输出,而书面文档则存在于 root Markdown 文件并 `guides/`。 。 。 .

## 计划中的特征

计划为今后的发布提供以下特点:

-   **绘图模式** - 免费绘图工具和刷子
-   **过滤器效果( E)** - 图像过滤器和视觉效果
-   **扩展形状库** - 在现有预设库之外的其他形状
-   **多语种** - 国际化支助

## 捐款

欢迎捐款! 请随意提交拉力请求.

见 [捐款额](https://npmcn.com/package/%40anu3ev/fabric-image-editor/CONTRIBUTING.md) 说明和捐款指南.

## QQ 浏览器支持

库在浏览器中运行并被建设为ES模块,目标为ES2022. 基于工人的图像处理使用网络工人, `createImageBitmap`,以及 `OffscreenCanvas`。远程图像和字体必须允许所需的跨源请求.

浏览器测试为Chromium配置.

对于具有服务器渲染功能的应用程序,在客户端的容器存在后,在客户端上加载并初始化编辑器.

## 许可证

麻省理工学院执照 - 看 [自由主义](https://npmcn.com/package/%40anu3ev/fabric-image-editor/LICENSE) 详细文件.

## 承认

-   与 [FabricJS 软件](https://fabricjs.com/) - 强大的 HTML5 帆布库
-   [维特](https://vitejs.dev/) - 闪电快速建设工具
-   [类型脚本](https://www.typescriptlang.org/) - 安全和开发人员的经验
-   [欢乐](https://jestjs.io/) - 综合测试框架

* * *

**仓库 :** [github.com/Anu3ev/图像编辑器](https://github.com/Anu3ev/image-editor)

**国家防范机制一揽子计划:** [@anu3ev/fabric-image-编辑器](https://www.npmjs.com/package/@anu3ev/fabric-image-editor)

**现场德莫:** [au3ev.github.io/图像编辑器](https://anu3ev.github.io/image-editor/)

## 常见问题

### @anu3ev/fabric-image-editor 是什么？

TypeScript 图像编辑器库建立在 FabricJS上,允许您创建带有集成蒙太奇区域的实例,并提供用于修改和管理状态的API\.

### 如何安装 @anu3ev/fabric-image-editor？

在项目目录运行 npm install @anu3ev/fabric-image-editor，或使用 pnpm add / yarn add / bun add。

### @anu3ev/fabric-image-editor 支持 TypeScript 吗？

支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。

### @anu3ev/fabric-image-editor 支持 ESM 还是 CommonJS？

以 ES Module 形式发布，推荐使用 import 引入。在 CommonJS 项目中，Node\.js 20\.19\+ / 22\.12\+ 可以直接 require\(\) 不含顶层 await 的 ES Module，更早的版本需要改用动态 import\(\)。

### @anu3ev/fabric-image-editor 需要什么版本的 Node\.js？

package\.json 的 engines 字段要求 Node\.js \>=20\.0\.0。版本不符时 npm 默认只给出警告，开启 engine-strict 后会拒绝安装。

### @anu3ev/fabric-image-editor 可以商用吗？

@anu3ev/fabric-image-editor 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。

### @anu3ev/fabric-image-editor 的下载量有多少？

根据 npm 官方下载统计，@anu3ev/fabric-image-editor 在 2026/10/06 – 2026/11/04 这 30 天内被下载 1,900 次，日均约 63 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @anu3ev/fabric-image-editor 还在维护吗？

最新版本 0\.14\.1 发布于 2026/11/04（4 天前）；至今共发布 245 个版本，其中过去 12 个月发布了 166 个；首次发布于 2025/05/23。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。