大家好，我是一名前端工程師，也是開源圖片編輯器vue-fabric-editor項目的作者，2024 年 5 月從北京辭職，我便開始了自己的輕創業之路，接觸了不同的客户和業務場景，回顧這半年，沒想到學會fabric.js這個Canvas庫，竟能做這麼多項目。

如果你打算學習一個Canvas庫或者做圖片設計、定製設計相關的工具，我建議你學習一下fabric.js 這個庫，它非常強大，可以做出很多有意思的項目，希望我的項目經歷能給你的技術選型做一些參考。

• 開源項目：vue-fabric-editor
• 預覽：https://www.kuaitu.cc

項目經歷

從北京回老家邯鄲後，我陸續做了很多項目，包括證件照設計、錦旗/銘牌定製工具、Shopify 定製插件、批量生成圖片、手機版圖片設計工具、服裝設計、電商工具等，這些項目都離不開fabric.js這個庫。回顧這段經歷，讓我深刻體會到它的強大和廣泛應用。

圖片設計

圖片設計是我接觸的第一個主要應用領域。項目最初源於一個小紅書成語卡片設計工具的構想，隨後逐步擴展到更廣泛的設計場景，包括小紅書封面、公眾號頭圖、營銷海報以及電商圖片等多種自媒體內容製作。

這類應用的核心功能在於自定義畫布尺寸和元素排版，得益於 fabric.js 的原生支持，實現起來相對簡單。我們主要工作是開發直觀的屬性編輯面板，使用户能夠便捷地調整所選元素的文字和圖片屬性。

當然如果做的完善一些，還需要歷史記錄、標尺、輔助線對齊、快捷鍵等，這些功能fabric.js並沒有包含，需要我們自己實現，這些功能可以參考 vue-fabric-editor 項目，它已經實現了這些功能。

還有很多細節的功能，比如組合保存、字體特效、圖層拖拽、圖片濾鏡等，這些功能我們做的比較完善了。

定製設計工具

圖片設計的場景相對通用，沒有太多定製化的需求。而定製類的設計工具則需要針對特定場景深度開發，比如證件照、錦旗/銘牌設計、相冊設計等，每個場景有不同的定製功能。

證件照設計工具的核心在於自動化的處理。主要工作量集中在尺寸的匹配，確保圖片能自動調整到最佳大小。同時，需要提供人物圖片的裁剪功能，讓用户能便捷地進行換裝、切換證件尺寸、更換背景等操作。

錦旗與銘牌設計則更注重文字內容的自動排版。系統需要根據用户輸入的抬頭、落款、贈言等內容，自動計算最優的文字間距和整體佈局，確保作品的美觀性。特別是銘牌設計，還需要實現曲線文字功能，讓文字能夠優雅地沿着弧形排布。

相冊設計工具的重點是提供靈活的畫布裁剪功能。用户可以使用各種預設的形狀模板來裁剪圖片，需要確保裁剪後的圖片既美觀又協調，最終生成精美的畫冊作品，交互上方便用户拖拽圖片快速放入裁剪區域。

電商工具

電商場景比圖片設計更垂直，除了普通的平面設計，例如店鋪裝修、商品主圖、詳情圖的設計，另外還需要對商品進行換尺寸、摳圖、換背景、去水印、塗抹消除、超清放大等操作，這些對圖片處理的要求更高一些。

批量生成

批量算是一個比較剛需的功能，比如電商的主圖，很多需要根據不同產品到圖片和價格來批量加邊框和文字，以及節慶價格折扣等，來生成商品主圖，結合圖片和表格可以快速生成，減少設計師的重複工作量。

另一部分是偏打印的場景，比如批量製作一些商品的二維碼條形碼，用在超市價籤、電子價籤、一物一碼、服裝標籤等場景，根據數據表格來批量生成。

這種項目主要的工作量在交互上，如何將畫布中的文字和圖片元素與表格中的數據一一對應，並批量生成，另外會有一些細節，比如條形碼的尺寸、圖片的尺寸如何與畫布中的尺寸比例進行匹配，這些細節需要我們自己實現。

上邊的方式是通過表格來批量生成圖片，還有一種是根據 API 來批量生成圖片，很多場景其實沒有編輯頁面，只希望能夠通過一個 API ，傳入模板和數據，直接生成圖片，fabric.js 支持在 nodejs 中使用，我們要做的就是根據模板和數據拼接 JSON ，然後通過 fabric.js 在後端生成圖片，然後返回給前端，性能很好，實際測試 2 核 2G 的機器，每張圖片在 100ms 左右。

很多營銷內容和知識卡片、證書、獎狀也可以通過批量生成圖片 API 來實現。

當然，還有一些更復雜的場景，比如不同的數據匹配不同的模板，不同的組件展示不同的形式等，包括錯別字檢測、翻譯等，我們也為客户做了很多定製化的匹配規則。

服裝/商品定製

服裝/商品定製是讓用户在設計平台上上傳圖片，然後將圖片貼圖到對應的商品模板上，實現讓用户快速預覽設計效果的需求。

這種場景一般會分為 2 類，一類是是針對 C 端用户，需要的是簡單、直觀，能夠讓用户上傳一張圖片，簡單調整一下位置就能確認效果快速下單。

我在這篇文章裏做了詳細介紹：《 fabric.js 實現服裝/商品定製預覽效果》。

另一類是針對小 B 端的用户，他們對設計細節有更高的要求，比如領子、口袋、袖子等，不同的位置進行不同的元素貼圖，最後將這些元素組合成一個完整的服裝效果圖，最後需要生成預覽圖片，在電商平台售賣，完成設計後，還要將不同區域的圖片進行存儲，提供給生產廠家，廠家快速進行生產。

比如抱枕、手機殼、T 恤、衞衣、帽子、鞋子、包包等，都可以通過類似服裝設計的功能來實現。

很多開發者會提出疑問，是否需要介入 3D 的開發呢？
我們也和很多客户溝通過，從業務的角度看，他回答是：3D 的運營成本太高。他們做的都是小商品，SKU 很多很雜，如果每上一個商品就要進行 3D 建模，週期長並且成本高，他們更希望的是通過 2D 的圖片來實現，而且 2D 完全能夠滿足讓用户快速預覽確認效果的需求，所以 2D 的服裝設計工具就成為了他們的首選。

包裝設計

包裝設計是讓用户在設計平台上，上傳自己的圖片，然後將圖片貼圖都包裝模板上，主要的場景是生成定製場景，比如紙箱、紙袋、紙盒、紙杯、紙質包裝等，這些場景需要根據不同的尺寸、形狀、材質、顏色等進行定製化設計，最後生成預覽圖片。

因為設計到不同的形狀和切面，而且大部分是大批量定製生產，所以對細節比較謹慎，另外包裝規格相對比較固定，所有用 3D 模型來實現就比較符合。

另外，在確定設計效果後，需要導出刀版圖，提供給生產廠家，廠家根據刀版圖進行生產，所以需要將設計圖導出為刀版圖，這個功能 fabric.js 也支持，可以導出為 SVG 格式直接生產使用。

AI 結合

在 AI 大火的階段，就不得不提 AI 的場景了，無論在自媒體內容、電商、商品、服裝設計的場景，都有 AI 介入的影子，舉個例子，通過 AI 生成內容來批量生成營銷內容圖片，通過 AI 來對電商圖片進行換背景和圖片翻譯，通過 AI 生成印花圖案來製作服裝，通過 AI 來生成紋理圖來生成紙盒包裝，太多太多的 AI 的應用場景，也是客户真金白銀定製開發的功能。

展望 2025

從圖片設計的場景來看，我們的產品已經很成熟了，也算是主力產品了，未來會持續迭代和優化，讓體驗更好，功能更強大，把細節做的更完善，例如支持打印、視頻生成等功能。

從定製設計工具的場景來看，我們積累了不同商品定製設計的經驗，從技術和產品到角度看，我們還可以抽象出更好的解決方案，讓客户能夠更高效、低成本的接入，提供給他們的客户使用，快速實現設計生產的打通。

2024 到 2025 ，從在家辦公一個人輕創業，搬到了我們的辦公室，期待未來越來創造更多價值。

總結

半年的時間，這些項目的需求fabric.js都幫我們實現了，所以如果你對Canvas感興趣，我的親身經歷告訴你，學習fabric.js是一個不錯的選擇。

另外，對我來説更重要的是，客户教會了我們很多業務知識，這些才是寶貴的業務知識和行業經驗，一定要心存敬畏，保持空杯，只有這樣我們才能做好在線設計工具解決方案。

這篇文章也算是我從 2024 年離職出來到現在的一個年終總結了，希望我們踩過的坑和積累的經驗都變成有價值的服務，作為基石在 2025 年服務更多客户，文章內容供大家一些參考，期待你的批評指正，一起成長，祝大家 2025 年大展宏圖。

給我們的開源項目一個 Star 吧：https://github.com/ikuaitu/vue-fabric-editor 😄。