Awesome

English| 中文

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.

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

Collaborators

License

Licensed under the MIT License.