# 简介

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

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

<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="https://1180301564-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fh6oKr8olVald4OAMk9rU%2Fuploads%2F2u4lFwaeAuahjJuHOTaf%2F230828335-0adee0ae-b951-4171-b6ba-d2b9cd44dd6a.png?alt=media&#x26;token=1b162794-0cad-4b60-94a3-a7285ff87e85" alt=""><figcaption></figcaption></figure>

## **技术选型**

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

## 应用场景

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

<div><figure><img src="https://1180301564-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fh6oKr8olVald4OAMk9rU%2Fuploads%2FPJ5E9KCVrBJnaIusEkQ3%2F867e54383ff847d7931e7cf9e6a04aff~tplv-k3u1fbpfcp-zoom-in-crop-mark_1512_0_0_0.webp?alt=media&#x26;token=23a240eb-6205-4b49-a794-7a24d55381c9" alt=""><figcaption></figcaption></figure> <figure><img src="https://1180301564-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fh6oKr8olVald4OAMk9rU%2Fuploads%2F52BIh7de8YHvbkjznbGU%2Fc5f1268b28694307b3cacc7c57bd3228~tplv-k3u1fbpfcp-zoom-in-crop-mark_1512_0_0_0.webp?alt=media&#x26;token=3460eff3-01f2-48fb-a88c-b60c64927b84" alt=""><figcaption></figcaption></figure></div>

## 与其他产品区别

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

<figure><img src="https://1180301564-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fh6oKr8olVald4OAMk9rU%2Fuploads%2FZft4Tx1cP8Er2s5TNtdF%2F2f004e7389ae47889a53f16afa815366~tplv-k3u1fbpfcp-zoom-in-crop-mark_1512_0_0_0.webp?alt=media&#x26;token=23bbbaa7-5bd3-4359-99f5-0f540c8785cb" alt=""><figcaption></figcaption></figure>

## 支持功能

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

<figure><img src="https://1180301564-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fh6oKr8olVald4OAMk9rU%2Fuploads%2FabHzlsKj6ormSNAQlajG%2Ff372975619e64f09a619b4c94e7f5261~tplv-k3u1fbpfcp-zoom-in-crop-mark_1512_0_0_0.webp?alt=media&#x26;token=d7af9bca-9025-4daa-8c04-aec3d514048d" alt=""><figcaption></figcaption></figure>


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://nihaojob.gitbook.io/editor/jian-jie.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
