GIF 分割器工具會把一個動畫 GIF 轉成各自獨立、已完整合成的 PNG 影格，你可以分別下載，每個影格的編號、畫布大小以及解碼後的延遲時間都會顯示在瀏覽器分頁標題上。它就在你閱讀的這個頁面上執行:由瀏覽器解碼檔案後，工具會套用前一個影格正確的處置指令，將每個區塊繪製到一個邏輯畫布上，再把該畫布轉成真正的 PNG Blob。這和直接匯出原始的 GIF 修補矩形不同——那種方式只涵蓋自前一影格以來變動的區域，並且常常帶有依賴先前播放狀態的透明像素——本工具產生的每個 PNG 都代表動畫在該時間點的完整可見畫布，所以它能在任何編輯器中以一般靜態影像的方式開啟。整個分割過程都在你的裝置上完成，沒有上傳、不需要帳號，也沒有遠端轉檔佇列。你會收到一份已編號的真實 PNG 清單，檔名由來源檔名加上補零的影格編號組成——animation-frame-01.png、animation-frame-02.png，依此類推——每個連結都指向一個你可以儲存或餵入不同工作流程的 PNG Blob。

how to split gift card
如何把禮物卡 GIF 分割成已編號的 PNG

「禮物卡」GIF 檔案裡裝了什麼

「禮物卡」這個詞通常指的是預付儲值卡，但人們在搜尋框裡常打成「how to split gift card」，其實是「GIF」的打字誤植。打這個詞的人幾乎都是想把一個短動畫 GIF 拆成個別的靜態影像。了解檔案實際內容會有幫助，因為動畫 GIF 並不是一堆已經完成的圖片等著重新命名。

編碼器通常會寫入一個小矩形來更新畫布的某個部分，並附上一個指令，告訴播放器如何處理前一影格留下的內容:保持原樣、清空，或是把畫布還原成倒數第二個影格的狀態。這種精簡的做法能讓檔案大小維持得很小，但也代表 GIF 裡的位元組無法直接存成 PNG，否則只會產生只涵蓋螢幕一部分的碎片。

一個天真的「萃取」步驟，只讀取每個影像區塊並改副檔名為 PNG，因此會產生誤導性的縮圖。一個閃爍游標的影格可能看起來像個微小的點狀方塊;一次局部的背景更新可能呈現一塊帶透明區域的色塊。任一個檔案看起來都不像使用者在播放過程中實際看到的靜態影像。有些區塊帶有透明像素，有些要求顯示後清掉自己的矩形，還有些要求還原到更早的畫面狀態。把那些原始矩形匯出去，會產生不完整的 PNG 檔，讓之後開啟的人一頭霧水。

正是那些處置方法，讓原始匯出在沒有脈絡時毫無用處。「保留原樣」代表新修補區疊在原本的內容之上。「還原為背景」會把畫布倒回前一影格繪製前的狀態，這可能會清掉原本預期要保留的元素。「還原為前一狀態」則會倒回到更早一個狀態。如果沒有追蹤這些指令，任何萃取出來的 PNG 都有可能只是剛好看起來對，或是明顯錯誤。

分割器會幫你處理這層合成。對於每個影像區塊，頁面會追蹤前一影格的處置行為，把新修補區繪製到持續累積的邏輯畫布上，再把那個完整畫面匯出為 PNG。一個閃爍的游標、一個移動的貼圖，以及一次局部的背景更新，各自都會變成一個能在任何編輯器直接開啟、不需要先前影格脈絡的完整 PNG。

如何把「禮物卡」GIF 分割成 PNG 影格

GIF 分割器工具圍繞著五個簡短步驟，全部都在目前的瀏覽器分頁內完成。

  1. 從你的裝置透過檔案選擇器挑選一個最多 20 MB 的動畫 GIF。
  2. 選擇「Extract PNG frames」(萃取 PNG 影格)，等待本機合成程序完成。這個迴圈裡沒有遠端伺服器，所以耗時取決於檔案的影格數與畫布大小，而非你的上傳速度。
  3. 檢視頁面產生的已編號預覽圖。每個預覽都會顯示完整的可見畫布、影格編號、畫布大小，以及解碼後的顯示延遲。
  4. 點擊每張預覽上個別的下載連結，下載你需要的完整 PNG 影格。每個連結都指向一個真正的 PNG Blob，檔名以補零的影格編號命名，例如 animation-frame-01.png。
  5. 儲存好需要的檔案後，請換掉輸入的 GIF，或關閉分頁以清除暫存預覽並撤銷它們的下載網址。

在整個工作流程中，來源檔案從未離開你的裝置。頁面從你的本機檔案選擇器讀取它，在瀏覽器內解碼，再把個別的 PNG 檔交還給你。沒有伺服器上傳、沒有遠端轉檔佇列，也不需要帳號。

頁面對每個萃取影格顯示的內容

萃取後出現的每張預覽都包含四項資訊，直接取自解碼後的檔案與目前的畫布。

欄位意義
影格編號在解碼後的 GIF 影像區塊順序中的位置，從 1 開始。
解碼後的延遲以毫秒為單位的 GIF 顯示延遲，作為將靜格重新排成動畫時的參考。
畫布大小以像素為單位的完整邏輯寬度與高度。
下載連結一個真正的 PNG Blob，而非佔位符，以補零的影格編號命名。

這些 PNG 保留了完整的邏輯畫布尺寸，並在瀏覽器畫布保留透明處的地方維持透明。PNG 支援 alpha 通道，所以帶局部透明的影格在編輯器中仍可開啟，不需要被壓平。頁面不會把每個影格裁剪到變動區域、不會縮放影像、不會把多個影格組合成一張聯絡表、不會在圖片後面加上檔名標籤，也不會重新編碼成新的動畫。如果你想要一張較小的輸出影像，請在稽核過後把萃取的影格丟進縮放工具;如果你想要重新得到一個動畫 GIF，可以用最佳化工具重新編碼原始檔。

輸入限制與其存在的原因

工具刻意設有安全限制，避免動畫悄悄地把瀏覽器分頁推過合理的資源配置。

限制項目允許值
所選 GIF 的檔案大小最多 20 MB
畫布寬度或高度最多 4,096 像素
單一影格的像素數最多 3,000,000
每個檔案的影像區塊(影格)數最多 50

動畫檔解壓縮後的體積往往遠大於原始位元組大小，因此這些檢查會在產生任何 PNG 之前，同時檢視整體修補工作量與合併後的輸出像素。被拒絕的輸入會回傳一則明確訊息，而且不會在頁面上留下任何半成品的影格清單。如果目前的瀏覽器無法配置所需的畫布，或無法解碼所提供的 GIF，作業會直接停止，而非吐出一個損壞或標錯的檔案。

這些上限能保護分頁不會因為一個看起來不大的 GIF，實際上卻要配置不合理數量的畫布像素而卡住，並讓合成步驟保持流暢。實際會撞到哪一個限制取決於檔案本身:一個在磁碟上遠低於 20 MB 的短循環貼圖，可能仍會有單一影格超過三百萬像素上限;而一個看起來位元組數不多的長反應 GIF，在編碼器大量使用處置變更時，可能會超過 50 個影像區塊。

萃取後的 PNG 稽核

為了確保使用可靠，萃取後請開啟第一張、中間一張，以及最後一張匯出的 PNG。把它們和原始動畫比對，特別留意那些只改變畫布一部分的轉場。如果 GIF 使用了非常細微的透明、色彩管理差異，或損壞的延伸區段資料，請在刪除來源檔之前，先在目的地應用程式中檢視產生的 PNG。

如果序列中間某個影格在應該實心的地方看起來是透明的，請重新開啟原始 GIF，並比對那個瞬間的播放畫面:細微的透明、色彩管理差異，或損壞的延伸區段資料，都可能造成明顯的不一致。如果某個影格在頁面預覽中看起來正確，但存檔後卻顯示異常，問題通常出在你的目的地應用程式而非匯出端:非常細微的 alpha 通道、色彩描述檔，或延伸的中繼資料，都可能讓預期標準 sRGB PNG 的影像編輯器感到困惑。

PNG 檔本身不帶動畫時序。解碼後的延遲會顯示在頁面上供排序參考，但它只是情境資訊，並不保證每個播放器或平台都會以完全相同的時序顯示原動畫。請把輸出的清單當成刪除或取代原始 GIF 前的視覺稽核。補零的檔名能讓檔案管理員或編輯器維持與動畫相同的順序:animation-frame-01.png 會排在 animation-frame-02.png 之前，不需手動排序。如果你需要把這些靜格以新的時序重新組回單一動畫 GIF，請在確認儲存下來的影格正是你想要的那些之後，再把萃取的 PNG 丟進合適的後續工具。

隱私與本機處理

分割器不會上傳你的來源檔，也不會保留萃取影像的永久副本。解碼、合成、PNG 產生、預覽與下載全部都在瀏覽器內本機進行;當輸出被取代、元件卸載，或你關閉分頁時，暫存物件網址會被撤銷。每份輸出都只在「你換掉輸入、離開頁面，或關閉分頁」之前可供使用。

實作上依賴瀏覽器畫布來實際產生 PNG，並且只有在你啟動萃取之後才進行本機 GIF 解碼。這讓頁面的初始程式碼保持輕量，也代表你的檔案不會產生任何網路請求。如果瀏覽器無法配置所需的畫布，或無法解碼所提供的 GIF，作業會直接停止，而非吐出一個損壞或標錯的檔案。

對於想進一步檢視本工具所仰賴的畫布原語的讀者，CanvasRenderingContext2D.putImageData 與 HTMLCanvasElement.toBlob 的 MDN 參考頁面，說明了像素緩衝區如何寫入畫布，以及畫布如何匯出為 PNG Blob。

若想進一步了解，請參閱最佳化動畫 GIF 以加快網頁載入。

若想進一步了解，請參閱如何依序分割圖片以符合 Instagram 格子排版。