TechMoon 科技月球
WordPress、SEO 與 AI 工具實測指南
TechMoon 科技月球
WordPress、SEO 與 AI 工具實測指南

Fabritor 是基於 fabric.js 的 MIT 開源圖片編輯器,打開官方示範站就能做海報與封面,匯出 PNG、SVG 或 JSON 範本,全程免註冊、圖片不上傳。實測編輯與自動保存都在本機完成,但要留意介面只有簡中與英文,示範站版本也比原始碼舊三個月,最新修正得自架才有。
用 AI 摘要這篇文章:
打開 Fabritor 的官方示範站,載入內建的 DEMO 範本,一張 1242×1660 的海報就攤在畫布上:把尺寸改成 800×1000、加一個標題文字、翻過六個工具面板都順利;再回到原始尺寸的畫布點開 Export 選單按 Export as PNG,瀏覽器直接把整張 1242×1660 的 PNG 存進下載資料夾。全程沒有註冊帳號、沒有浮水印,也沒有碰到任何匯出限制,而這個過程裡瀏覽器也沒有把圖面內容送到任何第三方伺服器。這是 2026 年 10 月實際操作一遍的結果。
先把結論放在前面:Fabritor 是一套基於 fabric.js 的開源圖片設計編輯器,MIT 授權、原始碼完整公開,你可以直接拿示範站做圖,也可以把整套程式搬回去自己架。它最特別的地方在於一套反直覺的現況:原始碼停在 2024 年 8 月底,示範站甚至部署得更早,但整個工具到今天依然完整可用。想免費做一張海報或社群封面的人可以用它;想省下從零開發圖片編輯器的團隊,更應該看懂它的能力邊界在哪裡。
Fabritor 的起手畫面只有兩個選擇:從空白畫布開始,或者載入官方 DEMO。空白畫布會給你預設尺寸與純白背景,什麼都要自己來;DEMO 則是一張已經排好版的作品,改字換圖就能交件,第一次用建議從這裡入門,順便看清每種工具長什麼樣子。DEMO 載入後就是一張完整的宣傳海報,有漸層字標語、手繪感的帆船插畫和波浪裝飾,右側面板同步顯示畫布尺寸(寬 1242、高 1660)與背景色設定。直接在右側把寬高數字改掉,畫布即時跟著變,不需要任何儲存動作。

左側工具列把功能分成六個面板,實際點開每一個看過:
畫布上方的工具列則放元件層級的操作:復原、重做、刪除都在這裡,搭配專案說明列出的鎖定、透明度、組合、複製貼上、圖層順序與歷史記錄,以及成組的鍵盤快捷鍵(相依裡就裝了 hotkeys-js 這套快捷鍵函式庫)。對做過設計工具的人來說,這組功能清單就是一套編輯器的最低標配,Fabritor 一次給齊,沒有把任何一項留給付費版。
字型是這類工具容易藏拙的地方,Fabritor 內建的是幾款知名開源字型。從實際載入紀錄看,示範站會在需要時從自己的伺服器拉得意黑(SmileySans)、思源宋體與霞鶩文楷的字型檔,原始碼裡還引用了思源黑體與 Noto Color Emoji。這些字型本身就是開源授權,等於連字型成本都幫你省了。
介面語言支援英文與中文切換,點左下角的語言鈕會即時換整套選單。要注意的是中文選項用的是簡體字,繁體中文不在內建語系裡;好在翻譯檔就是幾個 JSON 檔案,自架的人要自己補一套繁中翻譯並不難。
Export 選單點開一共五個選項:Export as JPG、Export as PNG、Export as SVG、Export as JSON、Copy to Clipboard。實際按了 Export as PNG,瀏覽器立刻觸發下載,存下來的檔案就是畫布當時尺寸 1242×1660 的 PNG,沒有浮水印、沒有壓縮痕跡,檔名會跟著畫布標題走。SVG 則是向量輸出,做好的圖要放大到輸出品或印刷場景不會糊;Copy to Clipboard 則讓你跳過存檔,直接把圖貼進文件或通訊軟體。

五個選項裡最值得留意的是 JSON。Fabritor 的畫布可以整份匯出成 JSON 描述檔,下次再載入就能還原整個編輯狀態,這也是它把自己定位成一套讓開發者快速打造圖片編輯器的底座的原因:範本庫、批次生成、接上自己的業務系統,都是從這個 JSON 介面長出來的。專案倉庫的說明文件也直接點出這個用途。實務上的玩法例如:把公司海報的版型調好、匯出 JSON,之後每檔活動只要換標題與日期文字,十分鐘產出一張符合品牌規範的圖。
操作過程裡最反常的發現是版本落差。GitHub 倉庫 sleepy-zone/fabritor-web 的主分支最後一次提交停在 2024 年 8 月 30 日,內容是修正多張圖片群組的問題(fix: multi img group),前一筆則是修正帶邊框圖片的匯出。但示範站伺服器回應標頭裡的部署戳記顯示,線上這份版本部署於 2024 年 5 月 29 日,正好是多語言功能上線的同一天。
換句話說,部署之後的最後三筆提交(一個把程式裡拚錯的單字 global 改對的清理,加上多圖群組與帶邊框匯出兩個功能修正)從來沒有上到官方示範站。直接用 fabritor.surge.sh 的人,用的是 2024 年 5 月的版本;原始碼裡那兩個匯出與群組修正,只有自己架一份才吃得到。這種「原始碼領先官方部署」的狀態在停止維護的專案裡很常見,但 Fabritor 的落差剛好卡在有實際影響的修正上。
「純瀏覽器端操作」是 Fabritor 官方說明裡的安全宣稱,實際行為要拆成兩層看。
編輯與匯出這一層,宣稱成立。從打開網站、載入 DEMO、翻面板到匯出 PNG,整個過程對外請求只有靜態資源:初次載入的 15 個全部來自同一個網站,是 JavaScript、樣式表與多語言檔;後續互動的 8 個是同源的字型檔與多語言檔重取,唯一的外部內容是 DEMO 範本那張船的插畫,放在 pixabay 的公開 CDN 上。沒有 Google Analytics、沒有 Sentry、沒有任何統計或上傳端點,依賴清單裡也找不到任何追蹤類套件。已經載入的素材,斷網後照樣能繼續編輯與匯出,離線狀態下加文字、匯出 PNG 都實測成功。
素材庫那一層,依賴就往外走了。前端程式碼裡寫死了三個外部來源:圖片濾鏡的縮圖預覽放在 GitHub 的 raw 服務上(一個獨立的 fabritor-assets 倉庫,2024 年 1 月後就凍結但仍可存取)、emoji 資料拉 jsdelivr CDN、DEMO 插畫拉 pixabay。就程式結構判斷,在封鎖 GitHub raw 或 jsdelivr 的網路環境裡,濾鏡縮圖與部分素材會載入失敗,但編輯器本體與匯出功能不受影響。反過來說,內建素材庫也不會再長新內容,因為素材倉庫已經兩年多沒有更新。自己放圖也有同樣的分界:從本機選檔案,圖不會離開瀏覽器;貼一個遠端網址載圖,瀏覽器就得向那個網址發請求。在意內容外流的人,把素材放在本機再載入,是最保險的用法。
自動保存同樣發生在本機。載入範本後檢查瀏覽器的 localStorage,會看到一個名為 fabritor_web_json 的鍵,存的正是 fabric.js 格式的整份畫布描述(版本欄位 5.3.0)。實際加一個標題文字到畫布,這份資料立刻從 6056 位元組長到 7030 位元組,物件清單從四個變五個,保存是即時的、不需要按任何儲存鈕。官方手冊對此有清楚的實作說明:編輯器監聽畫布的新增、移除、修改事件,每次變動就把最新狀態寫進 localStorage,重開頁面即可恢復。代價也在此:作品只存在這個瀏覽器裡,清掉網站資料等於作品消失,做完的圖請務必匯出。
Fabritor 免費嗎?可以商用嗎?
免費,而且授權乾淨:示範站與原始碼都不收費,沒有訂閱、沒有額度。倉庫附有 MIT 授權條款全文,沒有附加條款或商用限制,把它包進自己的產品、改造成公司內部工具都合法。示範站也沒有付費牆或帳號牆。
有繁體中文介面嗎?
沒有。內建語系只有英文與簡體中文,自動跟著瀏覽器語系走。繁中使用者要嘛適應簡體選單,要嘛自架後自己補翻譯檔。
和 Canva 這類線上設計服務比起來呢?
定位不同。Canva 的強項在雲端範本庫、協作與品牌素材管理,代價是設計內容都在服務商手上;Fabritor 剛好相反,範本少、沒有協作,但整個編輯過程在本機、原始碼可以整份拿走。個人快速做一張圖,兩者都行;要客製、要內嵌、在意圖片外流,Fabritor 才是那個選項。
手機上能用嗎?
不建議。這是為桌面瀏覽器設計的編輯器,畫布操作依賴滑鼠與快捷鍵;行動版支援從 2025 年 2 月起有人在 issue 討論區提出,至今沒有實作也沒有回應。手機上臨時改個字也許勉強,認真做圖請回到電腦前。
Fabritor 的主倉庫建立於 2023 年 11 月,至今累積到 1200 多顆星與 171 個 fork,開發卻在 2024 年 8 月戛然而止。幾個關鍵日期依序是:2023 年 11 月倉庫開張、12 月打下 1.0.0 標籤;2024 年 5 月 29 日多語言功能上線、示範站同日部署(就是今天還在服務的這份);8 月 30 日主分支寫下最後一次提交;2025 年 1 月作者在 issue 留下最後一次回覆;之後的提問,包括 2025 年 2 月的行動版支援、6 月的套件升級與事件綁定問題,全部沒有下文。更早的 2024 年 8 月,他在專案規劃討論裡的回覆大意是歡迎大家提交 PR,但也坦言工作太多、力不從心。作者的 GitHub 帳號這兩年仍活躍於其他專案,Fabritor 只是被放下了。
版本管理也停在半路:專案從未發布過正式 release,僅有 2023 年 12 月的一個 1.0.0 標籤,套件版本號停在 3.0.1。想鎖定「穩定版」的使用者沒有版本可認,只能對著某個 commit 自架,這在評估要不要依賴它時是具體的風險。
它還能用的原因,藏在架構裡。整個工具是純靜態的前端應用,示範站架在 surge.sh 這類靜態託管服務上,沒有後端伺服器、沒有資料庫、沒有 API 要養,也就沒有什麼東西會「倒」。這是純瀏覽器工具的一種生命週期:停止開發不等於停止運作,只要靜態託管還在、瀏覽器還支援,它就維持在被凍結那天的高度。不過這份長壽有個前提:示範站託管在 surge.sh 這個服務上,等於把上線與否交給一家第三方公司;靜態檔案本身沒有保存期限,託管服務卻有自己的營運風險。把「還能用」寄放在別人基礎設施上,正是除了版本落差之外,另一個該考慮自架的理由。當然天花板也在那裡:底層的 fabric.js,示範站實際跑的是 5.3.0 這一代,而這個函式庫的官方最新版已經來到 7.x,後續的大改版不會再出現在 Fabritor 裡。
周邊生態比想像中健康。171 個 fork 裡有沒有人接手維護,需要個別確認,但至少原始碼已經被大量複製保存,原始倉庫消失也不會讓這套工具絕版。官方手冊獨立成站,sitemap 列出 24 個頁面,從快速開始、Editor 類、物件到畫布操作都有,同時被定位成一本 fabric.js 學習手冊,內文頁面目前都正常開啟,只有首頁在自訂網域上掛著設定錯誤的橫幅。專案說明裡展示的成功案例 Photor,是一套以 Fabritor 為底打造的截圖美化工具,至今仍正常服務,同樣訴求的瀏覽器截圖美化工具站上先前也介紹過;有趣的是它裝了兩套流量統計,與示範站的零追蹤形成對比,也說明了同一套開源底座,商業化時會自己加上不同的東西。
官方示範站方便,但如前所述是 2024 年 5 月的版本。要用到最後的修正、換字型、改介面或接進自己的系統,就照倉庫 README 的說明自架:取得原始碼後安裝相依套件、執行啟動指令,本機 3000 連接埠就能跑起同一套編輯器,再當成靜態網站部署到任何託管服務。README 只需要短短幾行指令,沒有資料庫與後端設定,部署負擔遠低於一般自架服務。因為整包是靜態檔案,放到公司內部網路也完全可行,對照前述素材縮圖依賴外部 CDN 的問題,自架時甚至可以把素材庫一併換成自己伺服器上的檔案,做到徹底斷網可用。
兩種用法怎麼選,可以直接對照:
| 面向 | 官方示範站 | 自架一份 |
|---|---|---|
| 版本 | 2024 年 5 月部署版 | 原始碼最新狀態(含匯出與群組修正) |
| 免帳號 | 是 | 是 |
| 客製 | 無法改字型、介面、繁中翻譯 | 字型、翻譯、功能都可改 |
| 資料 | 存自己瀏覽器 | 存自己瀏覽器(或接自己後端) |
| 適合 | 臨時做一張圖、先試功能 | 產品內嵌、團隊長期使用 |
適合的人有三種。臨時需要一張活動海報或社群封面、不想為此註冊帳號的人,開示範站十分鐘就能交件;在意設計內容不出本機的人,做法上與本機處理派的圖片浮水印工具同一掛;以及想省下自研成本的開發者:畫布互動、圖層、歷史記錄、匯出、多語言這些從零寫要花上數週的基礎建設,Fabritor 已經做好並附上一本教你讀懂 fabric.js 的手冊,MIT 加 JSON 範本介面,等於拿到一台可以拆改的引擎,而不只是一個能使用的服務。
反過來,期待豐富範本挑選、繁體中文介面、雲端同步與團隊協作的人會失望,這些都在 Fabritor 的範圍外,走向以範本見長的 AI 海報產生器或商業設計服務會更實際。把 Fabritor 當長期生產工具的團隊,也要先接受兩個前提:不會有新功能,以及問題不會有人修,真遇到 bug 只能自己進原始碼。
下一步很單純:打開示範站按一遍 DEMO,五分鐘就知道順不順手;若決定自架,官方手冊的快速開始篇是最好的入口,跟著走一遍就能在自家網域上擁有同一套編輯器。