vue fabric editor

English| 中文

開源圖片編輯器· 插件化架構· 拖拽式設計· 功能完善

基於fabric.js 和Vue 開發的插件化圖片編輯器，可自定義字體、素材、設計模板、右鍵菜單、快捷鍵

演示· 文檔· 付費版演示· 付費版介紹

簡介

快圖設計，vue-fabric-editor 是一款基於fabric.js 和Vue 開發的圖片編輯器，可自定義字體、素材、設計模板、右鍵菜單、快捷鍵。

動圖介紹· 介紹視頻

特點

1. 插件化架構：可通過插件的進行擴展開發，支持右鍵菜單和快捷鍵。
2. 拖拽式設計：以輕量、簡潔為主的圖形編輯器，而非大而全的在線PS 類的重行設計工具。
3. 功能完善：PSD 解析、輔助線、歷史記錄、漸變、自定義字體、裁剪等功能。

已有功能

• 導入JSON、PSD 文件
• 導出PNG、SVG、JSON 文件
• 組合/拆分組合
• 圖層功能
• 漸變屬性
• 外觀屬性/字體屬性/描邊/陰影
• 撤銷/重做
• 快速鍵
• 右鍵菜單
• 輔助線
• 標尺
• 自定義字體
• 自定義模板素材
• 插入SVG、圖片素材
• 多元素水平、垂直對齊方式
• 背景屬性設置
• 箭頭/線條
• 畫筆/多邊形繪製
• 二維碼/條形碼
• 圖片替換/裁剪/濾鏡
• 水印
• 國際化

使用

請先安裝node.js v16，及pnpm， 然後執行以下命令：

 pnpm i
pnpm dev

開發者服務

• 微信交流群：我們組建了多個微信項目交流群，作者和項目維護者活躍在群內，定期解答問題。
• fabric.js 中文教程：https://blog.kuaitu.cc。
• 知識星球：長期更新開源編輯器與fabric.js 的相關資料，沉澱最佳實踐、開發經驗分享、代碼示例等。

付費版本

幫助企業快速搭建在線設計工具，減少企業研發投入，避免重複造輪子。

功能介紹· 產品介紹· 演示

開源版本僅前端代碼，付費版本提供完整的前後端、管理後台，功能完整開箱即用，提供源碼授權、支持二次開發。

• 開箱即用，功能完整：設計能力豐富，提供完整前台、後台功能，部署即可使用。
• 插件架構，擴展方便：基於插件化API，快速對編輯器進行二次開發。
• 批量生成，快速出圖：支持通過HTTP 接口、表格文件批量生成圖片。
• 拖拽式設計，簡單易用：適合普通用戶操作，無需培訓輕鬆上手。
• 全平台適配：PC 版本、H5 版本支持各種應用場景。
• 技術對接，文檔培訓：提供更多的支持，高效完成技術對接。
• 定制開發，減少投入：支持快速完成功能定制開發，減少研發投入。

貢獻指南

項目致力於打造一個開箱即用的web 圖片編輯器應用，同時沉澱一個介於web 圖片編輯器應用與fabric.js 之間的封裝層，期望封裝層面向開發者設計，提供更簡單的接口，讓開發者可以輕鬆的實現圖片應用開發。

如果你對這件事情感興趣，真誠的邀請你加入，我們一起成長，你只要會簡單的Git 和Javascript 語法就可以。

【提交代碼送贏雷蛇遊戲鼠標】

相關資料

這是我發表在掘金社區關於編輯器的技術筆記，會有更多的細節：

1. 使用fabric.js 快速開發一個圖片編輯器，
2. fabric.js 開發圖片編輯器的細節實現
3. fabric.js 開發圖片編輯器可以實現哪些功能？多圖
4. 我的開源項目與開源經歷分享
5. Canvas 庫fabric.js 可以實現哪些功能？ 動圖介紹
6. Vue 開源圖片編輯器
7. 個人開源項目商業化經驗分享
8. 開源fabric.js 圖片編輯器的插件化架構

注：如果遇到技術問題，期望使用issue 討論，它更加開放與透明，足夠多的信息會讓解決問題變得更高效，參考提問的智慧。

致謝

• 劉明野標尺功能作者。
• palxiao設計編輯器的漸變組件。

友情贊助

管理員

貢獻者

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

License

Licensed under the MIT License.