English| Chinese
Open source picture editor·Plugin architecture·Drag-and-drop design·Full functions
Plug-in picture editor developed based on fabric.js and Vue, which can customize fonts, materials, design templates, right-click menus, and shortcut keys.
Demo·Document·Paid Edition Demo·Paid Edition Introduction
Introduction
Quick picture design, vue-fabric-editor is a picture editor developed based on fabric.js and Vue, which can customize fonts, materials, design templates, right-click menus, and shortcut keys.
Animation introduction·Introduction video
Features
- Plugin architecture : It can be expanded and developed through plug-ins, supporting right-click menus and shortcut keys.
- Drag-and-drop design : a lightweight and concise graphic editor, rather than a large and complete online PS-like re-track design tool.
- Complete functions : PSD analysis, auxiliary lines, history, gradient, custom fonts, cropping and other functions.
Already have functions
- Import JSON and PSD files
- Export PNG, SVG, JSON files
- Combination/Split Combination
- Layer Function
- Gradient properties
- Appearance attributes/font attributes/strokes/shadows
- Undo/redo
- shortcut key
- Right-click menu
- Auxiliary line
- Ruler
- Custom fonts
- Custom template material
- Insert SVG, picture material
- Multi-element horizontal and vertical alignment
- Background attribute settings
- Arrows/lines
- Brush/polygon drawing
- QR code/bar code
- Image replacement/cropping/filter
- Watermark
- Internationalization
use
Please install node.js v16 and pnpm first, and then execute the following command:
Developer Services
- WeChat communication group : We have formed multiple WeChat project communication groups, with authors and project maintainers active in the group and answering questions regularly.
- fabric.js Chinese tutorial : https://blog.kuaitu.cc.
- Knowledge Planet : Long-term update of relevant information about open source editors and fabric.js, precipitate best practices, development experience sharing, code examples, etc.
Paid version
Help enterprises quickly build online design tools, reduce corporate R&D investment, and avoid repeated creation of wheels.
Function introduction·Product introduction·Demo
The open source version only has the front-end code. The paid version provides complete front-end and back-end and management back-end, complete functions out of the box, providing source code authorization and supporting secondary development .
- Out of the box, complete functions : rich design capabilities, provide complete front-end and back-end functions, and can be used in deployment.
- Plugin architecture, convenient expansion : Based on plug-in API, quickly develop the editor secondary.
- Batch generation, quick picture production : supports batch generation of pictures through HTTP interface and table files.
- Drag-and-drop design, simple and easy to use : suitable for ordinary users to operate, easy to get started without training.
- Adaptation of the entire platform : PC version and H5 version support various application scenarios.
- Technical docking, document training : provide more support and efficiently complete technical docking.
- Customized development, reduce investment : Supports quick completion of customized functions and reduces 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 deposits an encapsulation layer between the web image editor application and fabric.js. It is expected that the encapsulation layer is designed for developers and provides a simpler interface, so that developers can easily implement image application development.
If you are interested in this matter, sincerely invite you to join us and grow together. You only need to know the simple Git and Javascript syntax.
[Submit code and win Razer game mouse]
Related information
Here are my technical notes on the editor in the Nuggets community, and there will be more details:
- Use fabric.js to quickly develop a picture editor,
- Detailed implementation of fabric.js development image editor
- What functions can fabric.js develop image editor to implement? Multiple pictures
- My open source project and open source experience
- What functions can the Canvas library fabric.js implement? Animation image introduction
- Vue open source image editor
- Sharing of personal experience in commercialization of open source projects
- The plug-in architecture of open source fabric.js picture editor
Note: If you encounter technical problems, you expect to use issue to discuss, it is more open and transparent, and enough information will make solving problems more efficient, refer to the wisdom of asking questions.
Acknowledgements
- Liu Mingye Ruler Function Author.
- Gradient component of palxiao design editor.
Friendly sponsorship
administrator
Contributors
nihaojob |
Qiu-Jun |
wuchengguang1998 |
AliceLanniste |
ylx252 |
liumingye |
momo2019 |
ByeWord |
bigFace2019 |
wohuweixiya |
zjc2233 |
ijry |
Makeng |
z09176141 |
a847244052 |
briver0825 |
skyscraperno1 |
pengzhijian |
JiangShuQ |
hudenhui |
ddshiyu |
yehan68 |
luke358 |
xiaozeo |
x007xyz |
wozhi-cl |
vvbear |
slarkerino |
Rolitter |
moJiXiang |
macheteHot |
liuyaojun |
jooyyy |
guda-art |
nanfb |
dulltackle |
Bamzc |
Yangzongtai |
Alicehhhmm |
fuqianxi |
ichthoncosta |
liucity |
License
Licensed under the MIT License.
