配置图像编辑器
您可以在您的网络应用程序中构建一个图像编辑器 .
让用户裁剪图像,添加文字和形状,用地层,再利用成分来工作,并导出结果. 以类型脚本和 Fabric.js (法语),库中提供编辑工具,取消/重做,并通过API恢复状态,您可以连接到自己的界面.
为何这个项目很重要
用户可以在不离开应用程序的情况下准备并修改图像.
综合编辑器适合哪些地方的例子:
| 您的申请 | 用户可以对集成编辑器做什么 |
|---|---|
| 电子商务管理 | 制作产品图像并附有标题、宣传标签和一致的布局. |
| CMS或出版工具 | 在撰写一篇文章或一页时裁剪并作一插图. |
| 营销工具 | 重用已保存的成分并更改其文本、图像或背景 . |
| 带有 AI 图像生成的应用程序 | 在保存之前先编辑生成的图像 。 应用程序提供AI服务. |
由此库所建
我建造了这个TypeScript/FabricJS库,并将其整合到InSales的制作Vue图像编辑器中. 我拥有前端的架构和执行,从准备的Figma设计中工作,并界定了与后端工程师的API合同.
图书馆提供画布编辑,历史,和系列化. 案件所显示的产品特有Vue接口,后端和AI功能属于主机应用程序,不包含在npm包中.
在行动中看到它
现场演示演练通过公共API曝光的相同工作流程.
作物流动
层和历史
文本样式
招聘经理
该储存库展示了与下列机构的实际工作:
- 在画布运行时间之上构建的状态浏览器交互;
- 使用撤销/重做、序列化、模板恢复和导出进行编辑;
- 具有明确管理器所有权的模块化类型脚本架构;
- 为主机-应用程序集成而设计的公共API和事件;
- 诸如裁剪、选择、缩放、快取和文本编辑等交互重度情景的回归覆盖.
融合服务
我可以把这个编辑器整合到您的应用程序中,并适应您的工作流程.
这可以包括图像加载和保存,自定义工具,编辑器打开/关闭生命周期,以及应用程序中的错误处理.
我还在整合期间和发射后提供支助,包括排除故障、维护和进一步发展。 我们可以就你产品需求的范围和支持安排达成一致.
通过链接联系我 讨论你的融合.
* 特性
核心编辑
- 蒙太奇区 - 专门的工作空间,有精确收割区域
- 扫描和图像裁剪 - 用于蒙太奇再生和光栅图像裁剪的互动作物模式
- 多层支持 - 有订单、能见度和锁定的层管理
- 历史系统 - 与州管理层完全撤销/重做
- 丰富的文本编辑 - 有打字控制、大写转换和历史感更新的文本管理器
- 对象转换 - 缩小、旋转、翻转、适应和规模操作
- 专业工具 - 复制/粘贴、分组、选择和对齐
高级能力
- 背景管理 - 颜色、多站梯度和图像背景
- 图像导入/出口 - 进口PNG、JPEG、WebP和SVG;出口PNG、JPEG、WebP、SVG和PDF
- 精确对齐 - 与蒙太奇边缘/中心及附近物体相接并配有可视取向和间隔探测器
- 现场测量 - 坚持住
Alt选择显示被徘徊物体或蒙太奇区域的相距向导 - 网络工人整合 - 重型行动以背景线进行
- 字体装入器 - FontManager 处理 Google 字体 + 自动自定义源
@font-face登记 - 可配置工具栏 - 动态工具栏,带有对上下文敏感的动作
- 剪贴板集成 - 使用系统剪贴板的原生副本/粘贴支持
- 删除警卫 - 应用程序定义的规则可以防止用户删除受保护对象
- 克隆准备 - 应用程序可以在复制、粘贴、复制或剪接之前对对象克隆进行消毒
开发者特性
- 类型脚本支持 - 包括全部类型定义
- 模块结构 - 将关切与经理班级明确分开
- 事件系统 - 为整合进行丰富的事件处理
- 响应设计 - 适应不同的屏幕大小和容器
- 测试基础设施 - 覆盖80%的测试套房
* 安装
npm install @anu3ev/fabric-image-editor
所需经费:
- 节点.js ≥ 20.0.0
- 国家防范机制
- 使用 ES2022 支持的浏览器和列表中的 API 浏览器支持
QQ 快速启动
在页面上添加容器 :
<div id="editor"></div>
装入容器后初始化编辑器 :
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() 当自有页面或组件被删除时.
见 融合指南 用于配置、图像导入/导出、文本、形状、裁剪和其他编辑操作.
图书馆语言
英文(en)和俄语(ru)被捆绑. 英语是默认的.
const editor = await initEditor('editor', { language: 'ru' })
用 customLanguages数字 :
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 }
})
见 语文和翻译 用于可用密钥、倒置规则、部分超标和通知.
XQ 演示应用程序
该寄存器包括一个用于尝试库操作的开发演示. 见 从源头运行演示 用于本地设置.
访问演示 : 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- 指针旁显示的数值共享指标
各部分如何合作
- 初始化创建了管理器,加载了字体和初始内容,并建立了起始历史状态.
initEditor()等待时间editor.ready回来之前. - 一次UI行动呼叫相关经理. 该管理器协调几何,渲染,编辑事件,以及操作需要它们的历史.
- 撤消/重写和模板应用程序恢复对象及其编辑器特定的行为. 文本和形状需要它们的布局和相互作用状态与它们的序列化属性同时得到恢复.
- 裁剪框、向导和交互重叠是临时运行时间状态。 它们与保存或出口的成分分开.
destroy()释放实例的听众,工人,管理图像 URL,和UI资源. 该应用程序拥有其周边组件,API请求,并持续存储.
见 查找代码的正确部分 用于源入点和管理人员特定文件.
Jest覆盖了库行为; Playwright 练习浏览器交互. 覆盖徽章链接到单位测试工作流程.
发展
见 捐款额 用于本地设置、构建命令、类型检查、林入以及单位和浏览器测试.
项目结构
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) - 图像过滤器和视觉效果
- 扩展形状库 - 在现有预设库之外的其他形状
- 多语种 - 国际化支助
捐款
欢迎捐款! 请随意提交拉力请求.
见 捐款额 说明和捐款指南.
QQ 浏览器支持
库在浏览器中运行并被建设为ES模块,目标为ES2022. 基于工人的图像处理使用网络工人, createImageBitmap,以及 OffscreenCanvas。远程图像和字体必须允许所需的跨源请求.
浏览器测试为Chromium配置.
对于具有服务器渲染功能的应用程序,在客户端的容器存在后,在客户端上加载并初始化编辑器.
许可证
麻省理工学院执照 - 看 自由主义 详细文件.
承认
- 与 FabricJS 软件 - 强大的 HTML5 帆布库
- 维特 - 闪电快速建设工具
- 类型脚本 - 安全和开发人员的经验
- 欢乐 - 综合测试框架
国家防范机制一揽子计划: @anu3ev/fabric-image-编辑器
现场德莫: au3ev.github.io/图像编辑器