> For the complete documentation index, see [llms.txt](https://nihaojob.gitbook.io/editor/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://nihaojob.gitbook.io/editor/jian-jie.md).

# 简介

它是一款基于Fabric + Vue3开发的一款开源Web图片编辑器**，**二次开发简单、扩展便捷，**可帮助开发者快速构建一个面向非专业设计人员的图形编辑器**。

[预览](https://nihaojob.github.io/vue-fabric-editor/#/)   |  [Github主页](https://github.com/nihaojob/vue-fabric-editor) 

<div align="left"><figure><img src="https://img.shields.io/github/stars/nihaojob/vue-fabric-editor?style=social" alt=""><figcaption></figcaption></figure></div>

## 特点

* 功能完善：针对海报、图片编辑场景，基础功能完善，细节更丰富。
* 简单易用：简洁易用的交互方式，供非专业设计人员。
* 扩展便捷：业务层使用Vue开发，上手更块，Fabric.js做底层。

<figure><img src="/files/RstmwRt9SXx3i6BkeMJW" alt=""><figcaption></figcaption></figure>

## **技术选型**

**项目以Fabric.js 为底层，使用Vue3框架和精致的View UI Plus组件库构建**。 Fabric.js 是业界知名的Canvas工具库，它已经12岁了，在业界得到了广泛的应用和认可；Vue提供更友好的入门曲线，尤其在国内应用更广；希望借助这些优秀的开源项目，**构建底层强大、上手容易、便捷扩展、开箱即用的开源图像编辑器产品**。

## 应用场景

它适用于海报设计、封面设计、T恤设计、奖状/工卡设计、电子价签设计、印章设计、手机壁纸、PPT设计等场景，还有更复杂的工业软件场景，如机房拓扑拓展、设备巡检图等。

<div><figure><img src="/files/Yz22PXIzgUqWzJWNGyYE" alt=""><figcaption></figcaption></figure> <figure><img src="/files/7BzutWZcNyjVexe1gOgo" alt=""><figcaption></figcaption></figure></div>

## 与其他产品区别

已经有一些比较专业的开源编辑器项目，比如知名的SVGEdit项目，它们很强大，类似在线版本的PS，提供给更专业的设计师使用；**vue-fabric-editor的产品定位是给非专业设计人员使用**，例如让没有设计技能的运营同学在模板上简单修改，生成一张在公众号中使用的头图。

<figure><img src="/files/2v6xG6XcLZG0x4ehfH1A" alt=""><figcaption></figcaption></figure>

## 支持功能

* 支持导入导出JSON源文件，导出常见的图片PNG、SVG格式。
* 可自定义设计模板、字体样式模板、自定义分类素材。
* 元素支持拖拽、组合、层级管理、多种对齐操作。
* 图片素材支持插入、替换、滤镜、裁剪。
* 支持形状素材、线条绘制，渐变、边框、透明度、阴影设置。
* 画布可自定义尺寸、放大缩小、辅助线、标尺功能。
* 快捷键、右键菜单快捷操作设置。

<figure><img src="/files/KBmcs9OfSqPvA6LHllCP" alt=""><figcaption></figcaption></figure>