免費佔位圖片產生器

工作原理

一切都在你的瀏覽器中使用 HTML Canvas API 和手寫的 SVG 標記完成——沒有伺服器、不上傳、沒有第三方服務。你設定尺寸、顏色和標籤文字，工具會即時將圖片直接繪製到 canvas 元素上，並按需序列化為 PNG、JPEG 或 SVG。

1. 1
   設定尺寸和顏色

   輸入寬度和高度（各 1–4000 px），或從涵蓋常見社交媒體和設計尺寸的十一個預設中選擇。從內建主題中選擇背景和文字顏色，或直接輸入任意十六進位制值；原生顏色選擇器和經過驗證的文字方塊保持同步。
2. 2
   Canvas API 即時渲染預覽

   每次更改時，React effect 都會呼叫 drawPlaceholder()。該函式使用 CanvasRenderingContext2D 用背景色填充矩形，可選擇以 15% 不透明度繪製淡淡的對角交叉線，然後測量並置中對齊你的標籤文字——自動縮小字型大小，直到文字寬度不超過畫布的 90%。
3. 3
   匯出為 PNG、JPEG 或 SVG

   PNG 和 JPEG 下載會呼叫 canvas.toDataURL()，在記憶體中將 base64 結果轉換為 Blob 並觸發下載——全部在使用者手勢內同步完成，以滿足 iOS Safari 的下載規則。SVG 匯出會建立一個獨立的 SVG 字串，包含符合的 rect、可選的對角線和 text 元素，然後儲存為 .svg 檔案。
4. 4
   批次匯出與複製捷徑

   “下載所有預設”按鈕會動態匯入 JSZip，使用同一繪製函式將十一個預設尺寸逐一重新渲染到離屏畫布上，並將所有 PNG 打包為一個 ZIP。複製按鈕可輸出 PNG data URL、內聯 SVG img 標籤或 CSS background-image 宣告，可立即貼上到程式碼中。

相關工具