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

one-answer/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 文件
  • 保存为 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

服务支持

该项目是一个完全免费无任何使用限制的开源项目,帮助大量企业、开发者在短时间内构建了图片编辑器应用,因不同企业对研发资源的投入差异会很大,所以我们提供了帮助企业和开发者更快速、高效、低成本构建图片编辑应用的解决方案商务联系

  • 素材管理后台:提供素材管理后台系统,可对编辑器进行字体、模板、图片素材进行管理。
  • 批量图片生成:可根据模板 + 内容,批量生成创意图片,支持
  • 围绕在电商、营销、印刷等图片场景下的解决完整解决方案,欢迎与我们联系。
  • 定制开发:我们有更多关于fabric与图片编辑器的相关经验。

贡献指南

项目致力于打造一个开箱即用的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升级 进行中
  • 插件化
  • 标尺插件
  • 截图插件
  • 滤镜插件
  • 画布插件
  • 其他工具函数
  • @fabricEditor SDK封装
  • 基于插件开发移动端
  • 基于插件开发其他图片应用
  • 文档建设(中英文)

致谢

贡献者

nihaojob
nihaojob
Qiu-Jun
Qiu-Jun
ylx252
ylx252
liumingye
liumingye
AliceLanniste
AliceLanniste
bigFace2019
bigFace2019
wohuweixiya
wohuweixiya
makeng
makeng
z09176141
z09176141
zjc2233
zjc2233
a847244052
a847244052
briver0825
briver0825
JiangShuQ
JiangShuQ
hudenghui
hudenghui
ddshiyu
ddshiyu
yehan68
yehan68
luke358
luke358
xiaozeo
xiaozeo
x007xyz
x007xyz
wozhi-cl
wozhi-cl
vvbear
vvbear
slarkerino
slarkerino
rolitter
rolitter
macheteHot
macheteHot
jooyyy
jooyyy
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 51.3%
  • TypeScript 42.4%
  • JavaScript 3.3%
  • Less 1.5%
  • Shell 0.6%
  • HTML 0.5%
  • Other 0.4%