https://github.com/ikuaitu/vue-fabric-editor

快图设计-基于fabric.js和Vue的开源图片编辑器，可自定义字体、素材、设计模板。fabric.js and Vue based image editor, can customize fonts, materials, design templates.
https://github.com/ikuaitu/vue-fabric-editor

canvas-editor design design-editor editor fabricjs image-editor poster svg-editor vue-fabric

Last synced: 10 days ago
JSON representation

快图设计-基于fabric.js和Vue的开源图片编辑器，可自定义字体、素材、设计模板。fabric.js and Vue based image editor, can customize fonts, materials, design templates.

Host: GitHub
URL: https://github.com/ikuaitu/vue-fabric-editor
Owner: ikuaitu
License: mit
Created: 2022-09-03T16:43:33.000Z (over 2 years ago)
Default Branch: main
Last Pushed: 2025-04-16T04:59:19.000Z (18 days ago)
Last Synced: 2025-04-18T00:37:50.900Z (16 days ago)
Topics: canvas-editor, design, design-editor, editor, fabricjs, image-editor, poster, svg-editor, vue-fabric
Language: Vue
Homepage: https://ikuaitu.github.io/doc/#/
Size: 189 MB
Stars: 6,635
Watchers: 50
Forks: 1,220
Open Issues: 59
Metadata Files:
- Readme: README-en.md
- Contributing: CONTRIBUTING.md
- Funding: .github/FUNDING.yml
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md

Awesome Lists containing this project

README

English| [中文](https://github.com/ikuaitu/vue-fabric-editor/blob/main/README.md)

Plugin architecture · Drag-and-drop design · Complete functions

Based on fabric.js and Vue developed plug-in image editor, can customize fonts, materials, design templates, right-click menu, shortcut keys

Preview · Document · Enterprise Edition Preview · Enterprise Edition

## Introduction

Vue-Fabric-Editor is an image editor based on fabric.js and Vue, which can customize fonts, materials, design templates, right-click menus, and shortcut keys.

[GIF introduction](https://juejin.cn/post/7222141882515128375) · [Introductory video](https://www.bilibili.com/video/BV1US421A7TU/?spm_id_from=333.999.0.0)

### Features

1. **Plug-in architecture**: can be extended and developed through plug-ins, supporting right-click menus and shortcut keys.
2. **Drag-and-drop design**: a graphic editor that is mainly lightweight and simple, rather than a large and comprehensive online PS-like heavy-line design tool.
3. **Full-featured**: PSD parsing, auxiliary lines, history, gradients, custom fonts, cropping and other functions.

### Existing features

- Import JSON, PSD files
- Export PNG, SVG, JSON files
- Combine/split combinations
- Layer functions
- Gradient properties
- Appearance properties/Font properties/Stroke/Shadow
- Undo/Redo
- Shortcuts
- Right-click menu
- Auxiliary lines
- Rulers
- Custom fonts
- Custom template materials
- Insert SVG, image materials
- Horizontal and vertical alignment of multiple elements
- Background property settings
- Arrows/lines
- Brush/polygon drawing
- QR code/barcode
- Image replacement/cropping/filters
- Watermark
- Internationalization

## Use

Please install node.js v16 and pnpm first, then execute the following command:

```
pnpm i
pnpm dev
```

## Enterprise Edition

Help enterprises quickly build online design tools, **reduce enterprise R&D investment, and avoid reinventing the wheel.**

[Function Introduction](https://ws0gdejldw.feishu.cn/docx/GKmnddCgFokr4sxFeYNcoql1nAb) · [Product introduction](https://pro.kuaitu.cc/index-en.html) · [Preview](https://www.kuaitu.cc/)

The open source version only contains the front-end code, while the paid version **provides complete front-end, back-end and management background, with full functionality out of the box, and provides source code authorization and supports secondary development**.

- **Ready to use out of the box, full functionality**: Rich design capabilities, providing complete front-end and back-end functions, ready to use after deployment.
- **Plug-in architecture, easy to expand**: Based on plug-in API, quickly carry out secondary development of the editor.
- **Batch generation, fast output**: Support batch generation of images through HTTP interface and table files.
- **Drag-and-drop design, simple and easy to use**: Suitable for ordinary users, easy to get started without training.
- **Technical docking, document training**: Provide more support and efficiently complete technical docking.
- **Customized development, reduced investment**: Support the rapid completion of functional customized development and reduce R&D investment.

## Contribution guide

The project is committed to creating an out-of-the-box web image editor application, and at the same time, it will precipitate an encapsulation layer between the web image editor application and fabric.js. It is expected that the encapsulation layer will be designed for developers and provide a simpler interface so that developers can easily develop image applications.

If you are interested in this matter, we sincerely invite you to join us and grow together. You only need to know simple Git and Javascript syntax.

### Related Materials

This is a technical note I published on the Nuggets community about the editor, which will have more details:

1. [Use fabric.js to quickly develop an image editor](https://juejin.cn/post/7155040639497797645),
2. [Detailed implementation of fabric.js developing an image editor](https://juejin.cn/post/7199849226745430076)
3. [What functions can fabric.js develop an image editor to achieve? ](https://juejin.cn/post/7222141882515128375)
4. [Sharing my open source projects and open source experience](https://juejin.cn/post/7224765991896121401)
5. [What functions can fabric.js achieve with the Canvas library?](https://juejin.cn/post/7336743827827015731)
6. [Vue open source image editor](https://juejin.cn/post/7384258569590636595)
7. [Sharing of personal open source project commercialization experience](https://juejin.cn/post/7400687574967271478)
8. [Open source fabric.js image editor plug-in architecture](https://juejin.cn/post/7401071861847949339)

Note: If you encounter technical problems, you are expected to use issue Discussion, it is more open and transparent, enough information will make problem solving more efficient, refer to [The wisdom of asking questions](https://github.com/ryanhanwu/How-To-Ask-Questions-The-Smart-Way/blob/main/README-zh_CN.md#%E6%8F%90%E9%97%AE%E7%9A%84%E6%99%BA%E6%85%A7).

## Administrator

_nihaojob

_Qiu-Jun

_{wuchenguang1998}