一飞开源，介绍创意、新奇、有趣、实用的免费开源应用、系统、软件、硬件及技术，一个探索、发现、分享、使用与互动交流的开源技术社区平台。致力于打造活力开源社区，共建开源新生态！

一、开源项目简介

vue-fabric-editor

帮助开发者快速构建图片编辑器应用

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

二、开源协议

使用MIT开源协议

三、界面展示

四、功能概述

特点

• 功能完善：针对海报、图片编辑场景，基础功能完善，细节更丰富。

• 简单易用：简洁易用的交互方式，供非专业设计人员。

• 扩展便捷：业务层使用Vue开发，上手更块，Fabric.js做底层。

应用场景

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

与其他产品区别

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

支持功能

• 支持导入导出JSON源文件，导出常见的图片PNG、SVG格式。

• 可自定义设计模板、字体样式模板、自定义分类素材。

• 元素支持拖拽、组合、层级管理、多种对齐操作。

• 图片素材支持插入、替换、滤镜、裁剪。

• 支持形状素材、线条绘制，渐变、边框、透明度、阴影设置。

• 画布可自定义尺寸、放大缩小、辅助线、标尺功能。

• 快捷键、右键菜单快捷操作设置。

已有功能

功能介绍文章 文字 + 动图。

• 导入 JSON 文件

• 保存为 PNG、SVG、JSON 文件

• 插入 SVG、图片文件

• 多元素水平、垂直对齐方式

• 字体模板

• 组合/拆分组合

• 图层及顺序调整

• 撤销/重做

• 背景属性设置

• 外观属性/字体属性/描边/阴影

• 自定义字体

• 自定义模板素材

• 快捷键

• 右键菜单

• 辅助线

• 标尺

• 图片替换

• 图片滤镜

• 国际化

来源：Vue-Fabric-Editor官网文档

五、技术选型

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

使用

启动项目

请先安装node.js v16，然后执行以下命令：

yarn installyarn serve

为非web前端开发人员准备了部署教程，快速解决你的部署需求。

自定义素材

可自定义字体、设计模板、标题模板等，所有自定义素材在 vue-fabric-editor-static 项目中保存。

六、源码地址

访问一飞开源：https://code.exmay.com/