Skip to content

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

License

Notifications You must be signed in to change notification settings

ikuaitu/vue-fabric-editor

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

English| 中文

Open source image editor

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


stars stars contributors license 快图设计网站


演示

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 · Introductory video

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 · Product introduction · Preview

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.
Open source image editor

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,
  2. Detailed implementation of fabric.js developing an image editor
  3. What functions can fabric.js develop an image editor to achieve?
  4. Sharing my open source projects and open source experience
  5. What functions can fabric.js achieve with the Canvas library?
  6. Vue open source image editor
  7. Sharing of personal open source project commercialization experience
  8. Open source fabric.js image editor plug-in architecture

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.

Administrator

nihaojob
nihaojob
Qiu-Jun
Qiu-Jun
wuchenguang1998
wuchenguang1998

Collaborators

nihaojob
nihaojob
Qiu-Jun
Qiu-Jun
wuchenguang1998
wuchenguang1998
AliceLanniste
AliceLanniste
ylx252
ylx252
liumingye
liumingye
momo2019
momo2019
ByeWord
ByeWord
bigFace2019
bigFace2019
wohuweixiya
wohuweixiya
zjc2233
zjc2233
ijry
ijry
makeng
makeng
z09176141
z09176141
a847244052
a847244052
briver0825
briver0825
skyscraperno1
skyscraperno1
pengzhijian
pengzhijian
JiangShuQ
JiangShuQ
hudenghui
hudenghui
ddshiyu
ddshiyu
yehan68
yehan68
luke358
luke358
xiaozeo
xiaozeo
x007xyz
x007xyz
wozhi-cl
wozhi-cl
vvbear
vvbear
slarkerino
slarkerino
rolitter
rolitter
moJiXiang
moJiXiang
macheteHot
macheteHot
liuyaojun
liuyaojun
jooyyy
jooyyy
guda-art
guda-art
nanfb
nanfb
dulltackle
dulltackle
Bamzc
Bamzc
Yangzongtai
Yangzongtai
Alicehhhmm
Alicehhhmm
fuqianxi
fuqianxi
icleitoncosta
icleitoncosta
liucity
liucity

License

Licensed under the MIT License.