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

skyscraperno1/vue-fabric-editor

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

文档 | English | 中文

快图设计 - vue-fabric-editor

基于 fabric.js 和 Vue 开发的插件化图片编辑器,可自定义字体、素材、设计模板、右键菜单、快捷键。

image

特点

  1. 插件化架构:可自定义素材、右键菜单、快捷键等功能,易扩展。
  2. 简洁易用:以轻量、简洁为主的图形编辑器,而非大而全的在线 PS 类的重行设计工具。
  3. 功能齐全:自定义模板、渐变、自定义字体等功能,满足轻量图片编辑场景。

已有功能

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

  • 导入 JSON、PSD 文件
  • 保存为 PNG、SVG、JSON 文件
  • 插入 SVG、图片文件
  • 多元素水平、垂直对齐方式
  • 字体模板
  • 组合/拆分组合
  • 图层及顺序调整
  • 撤销/重做
  • 背景属性设置
  • 外观属性/字体属性/描边/阴影
  • 自定义字体
  • 自定义模板素材
  • 快捷键
  • 右键菜单
  • 辅助线
  • 标尺
  • 图片替换
  • 图片滤镜
  • 国际化

使用

启动项目

请先安装 node.js v16,及 pnpm, 然后执行以下命令:

pnpm i
pnpm dev

自定义素材

可自定义字体、设计模板、标题模板等,你也可以购买我整理好的字体文件 + 字体文件生成预览图片的示例代码,购买链接

开发者服务

  • 微信交流群:我们组建了 450+人的微信项目交流群,作者和项目维护者活跃在群内,定期解答问题。
  • 知识星球:沉淀高质量常见问题、最佳实践文档,如跨域、部署、字体素材等问题,长期更新围绕在开源编辑器、fabric.js 的相关资料。
  • 付费咨询:提供 200 元/小时的咨询服务,帮你快速解决项目中遇到的问题。
  • fabric.js 代码示例查看
  • 视频教程:《fabric.js 入门教程》、《使用 fabric.js 从 0 到 1 构建图片编辑器》《vue-fabric-editor 开发实践》

27d4480f-efa5-4ed3-93ed-d1a755cb41cf

付费版本

开源版本仅前端代码,付费版本提供完整的前后端服务,开箱即用,无须任何开发,支持 Docker 部署,包括功能:

  • 素材管理后台:可对编辑器中的字体、模板、图片素材进行便捷操作管理。
  • 批量导入:字体文件、素材、PSD模板批量导入到后台系统。
  • 用户管理:支持登录/注册,用户账号禁用启用。
  • 用户素材:图片素材、用户模板。
  • HTTP接口对接:微信、短信登录,API接口登录,支持多种形式对接。
  • 批量图片生成:可根据模板 + 内容,批量生成创意图片。
  • 批量AI抠图:提供一定数量级的免费抠图服务。

我们致力于帮助企业快速、低成本构建图片编辑应用,支持定制开发,欢迎与我们联系。 image

贡献指南

项目致力于打造一个开箱即用的 web 图片编辑器应用,同时沉淀一个介于 web 图片编辑器应用与 fabric.js 之间的封装层,期望封装层面向开发者设计,提供更简单的接口,让开发者可以轻松的实现图片应用开发。

我们离目标还有很长的距离,如果你对这件事情感兴趣,真诚的邀请你加入,我们一起沉淀 fabric.js 的最佳实践,你会得到包括不限于以下列表的收获,你只要会简单的 Git 和 Javascript 语法就可以。

  • 熟悉开源协作方式,成为项目贡献者。
  • Vue3 + TS 实践,边学边开发。
  • fabric.js 开发,边学边开发。
  • 入门单元测试,边学边开发。
  • 众多的 fabric.js 开发者交流。
  • 图形编辑器架构经验。

目前有很多需要做的工作,比如英文文档的搭建、SDK 拆分等,欢迎与我联系,我愿意与你进行任何问题的交流,微信:13146890191。期待你的 issue 和 PR 。

这是我发表在掘金社区关于编辑器的技术笔记,会有更多的细节:

  1. 使用 fabric.js 快速开发一个图片编辑器
  2. fabric.js 开发图片编辑器的细节实现

注:如果遇到技术问题,期望使用 issue 讨论,它更加开放与透明,足够多的信息会让解决问题变得更高效,参考提问的智慧

规划

可能新增功能

第一阶段

  • 缩放
  • 三角形、箭头、线条
  • 复制 粘贴 快捷键
  • 拖动模式,放大缩小
  • 画布大小保存
  • 绘制线条
  • svgIcon 汇总
  • 标题样式列表模板
  • 预览

第二阶段

  • 图片替换
  • 渐变配置
  • 平铺背景、等比例背景
  • 图片裁剪
  • 滤镜
  • 描边 strokeDashArray

第三阶段

  • monorepo 升级 进行中
  • 插件化
  • 标尺插件
  • PSD导入插件
  • 截图插件
  • 滤镜插件
  • 画布插件
  • 其他工具函数
  • @fabricEditor SDK 封装
  • 基于插件开发移动端
  • 基于插件开发其他图片应用
  • 文档建设(中英文)

致谢

管理员

nihaojob
nihaojob
Qiu-Jun
Qiu-Jun
wuchenguang1998
wuchenguang1998

贡献者

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

License

Licensed under the MIT License.

About

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

Resources

License

Code of conduct

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • Vue 53.6%
  • TypeScript 39.1%
  • JavaScript 5.3%
  • Less 1.1%
  • CSS 0.7%
  • HTML 0.2%