🗂️ 紋理圖集生成器
將多張圖片打包成一個優化的 PNG 紋理圖集，並獲得即用的 CSS background-position 規則 — 無需上傳，完全在瀏覽器中免費使用。
🗂️
在此處拖放圖片，或點選選擇多張圖片
打包成一個PNG + CSS — 在您的瀏覽器中完成，無需上傳
隱私優先設計. 此工具完全在您的瀏覽器中運行 — 您輸入的內容不會上傳或儲存，而且它可以在離線狀態下使用。
關於
此工具使用瀏覽器的 Canvas API 在您的設備上將圖片打包成緊湊的 PNG 紋理圖集 — 無任何內容上傳到伺服器。您可以拖放任意數量的圖片，設定最大行寬度和每個紋理的內邊距，打包器會按行排列以最小化空間浪費。生成後，您可以下載合併的 PNG，並複製 CSS 程式碼片段，其中每個紋理都有對應的類別，包含正確的 background-image、background-position、width 和 height 值，可直接貼到您的樣式表中。因為所有處理都在瀏覽器中本地執行，整個過程即時且完全私密。
如何使用
- 將圖片拖放到上傳區域，或點選以瀏覽並一次選擇多個文件。
- 設定最大行寬度（以像素為單位）和每個紋理的內邊距，以控制它們的緊密程度。
- 點選「生成紋理圖集」將所有圖片打包成一個合併的 PNG，並立即在畫布上預覽。
- 複製生成的 CSS — 每個紋理都會有自己的類別，包含正確的 background-position、width 和 height 值。
- 下載 PNG 紋理圖集並將 CSS 貼到您的專案樣式表中 — 完成。
常見問題
- 我的圖片會上傳到伺服器嗎？
- 不會。所有操作都在瀏覽器中使用 Canvas API 進行。您的文件永遠不會離開您的設備。
- 我可以將多少張圖片加入一個紋理圖集？
- 沒有硬性限制 — 工具會根據您的瀏覽器記憶體打包任意數量的圖片。為獲得最佳效能，請保持每個紋理的尺寸合理。
- 最大行寬設定是做什麼的？
- 它限制每一行圖示可以增長到多寬，直到打包器開始新的一行。較大的值會產生較寬的圖示表；較小的值會產生較高且較窄的圖示表。
- 我可以直接在我的專案中使用產生的 CSS 嗎？
- 可以。每個圖示類別都包含背景圖片 URL（指向你下載的 PNG）、背景位置、寬度和高度 — 只需將它貼到任何樣式表中，並套用這個類別到你的 HTML 元素上。
- 我可以使用哪些圖片格式作為輸入圖示？
- 任何你瀏覽器可以解碼的格式 — PNG、JPEG、WebP、GIF、SVG、AVIF 等等。輸出的圖示表始終是單一的 PNG 格式，以達到最大的相容性。
- 此工具會上傳我的資料嗎？
- 不會。所有運作都在您的瀏覽器中進行，因此您的資料永遠不會離開您的設備 — 頁面載入後，它甚至可以在離線狀態下使用。