沒想到學會這個canvas庫，竟能做這么多項目
當前位置：點晴教程→知識管理交流
→『 技術文檔交流 』
大家好，我是一名前端工程師，也是開源圖片編輯器vue-fabric-editor?項目的作者，2024年5月從北京辭職，我便開始了自己的輕創業之路，接觸了不同的客戶和業務場景，回顧這半年，沒想到學會 如果你打算學習一個
項目經歷從北京回老家邯鄲后，我陸續做了很多項目，包括證件照設計、錦旗/銘牌定制工具、Shopify定制插件、批量生成圖片、手機版圖片設計工具、服裝設計、電商工具等，這些項目都離不開 圖片設計圖片設計是我接觸的第一個主要應用領域。項目最初源于一個小紅書成語卡片設計工具的構想，隨后逐步擴展到更廣泛的設計場景，包括小紅書封面、公眾號頭圖、營銷海報以及電商圖片等多種自媒體內容制作。 這類應用的核心功能在于自定義畫布尺寸和元素排版，得益于fabric.js的原生支持，實現起來相對簡單。我們主要工作是開發直觀的屬性編輯面板，使用戶能夠便捷地調整所選元素的文字和圖片屬性。 當然如果做的完善一些，還需要 還有很多細節的功能，比如組合保存、字體特效、圖層拖拽、圖片濾鏡等，這些功能我們做的比較完善了。
定制設計工具圖片設計的場景相對通用，沒有太多定制化的需求。而定制類的設計工具則需要針對特定場景深度開發，比如證件照、錦旗/銘牌設計、相冊設計等，每個場景有不同的定制功能。 證件照設計工具的核心在于自動化的處理。主要工作量集中在尺寸的匹配，確保圖片能自動調整到最佳大小。同時，需要提供人物圖片的裁剪功能，讓用戶能便捷地進行換裝、切換證件尺寸、更換背景等操作。
錦旗與銘牌設計則更注重文字內容的自動排版。系統需要根據用戶輸入的抬頭、落款、贈言等內容，自動計算最優的文字間距和整體布局，確保作品的美觀性。特別是銘牌設計，還需要實現曲線文字功能，讓文字能夠優雅地沿著弧形排布。
相冊設計工具的重點是提供靈活的畫布裁剪功能。用戶可以使用各種預設的形狀模板來裁剪圖片，需要確保裁剪后的圖片既美觀又協調，最終生成精美的畫冊作品，交互上方便用戶拖拽圖片快速放入裁剪區域。
電商工具電商場景比圖片設計更垂直，除了普通的平面設計，例如店鋪裝修、商品主圖、詳情圖的設計，另外還需要對商品進行換尺寸、摳圖、換背景、去水印、涂抹消除、超清放大等操作，這些對圖片處理的要求更高一些。
批量生成批量算是一個比較剛需的功能，比如電商的主圖，很多需要根據不同產品到圖片和價格來批量加邊框和文字，以及節慶價格折扣等，來生成商品主圖，結合圖片和表格可以快速生成，減少設計師的重復工作量。
另一部分是偏打印的場景，比如批量制作一些商品的二維碼條形碼，用在超市價簽、電子價簽、一物一碼、服裝標簽等場景，根據數據表格來批量生成。
這種項目主要的工作量在交互上，如何將畫布中的文字和圖片元素與表格中的數據一一對應，并批量生成，另外會有一些細節，比如條形碼的尺寸、圖片的尺寸如何與畫布中的尺寸比例進行匹配，這些細節需要我們自己實現。 上邊的方式是通過表格來批量生成圖片，還有一種是根據 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 ，從在家辦公一個人輕創業，搬到了我們的辦公室，期待未來越來創造更多價值。
總結半年的時間，這些項目的需求 另外，對我來說更重要的是，客戶教會了我們很多業務知識，這些才是寶貴的業務知識和行業經驗，一定要心存敬畏，保持空杯，只有這樣我們才能做好在線設計工具解決方案。 這篇文章也算是我從 2024年離職出來到現在的一個年終總結了，希望我們踩過的坑和積累的經驗都變成有價值的服務，作為基石在2025年服務更多客戶，文章內容供大家一些參考，期待你的批評指正，一起成長，祝大家 2025年大展宏圖。 給我們的開源項目一個Star吧：github.com/ikuaitu/vue… ??。 轉自https://juejin.cn/post/7459286862839054373 該文章在 2025/3/19 9:11:02 編輯過 |
關鍵字查詢
相關文章
正在查詢... 
|
400 186 1886
