體驗地址

工具地址 由于掛載在github page上，打開速度會慢一些，請耐心等待或自行解決git網速問題

背景

為什么要制作這么一款工具

最近在做一款表情包的產品，需要將文字生成到gif圖片中，并可以控制文字顯示的位置，并將不同的文字顯示在不同的圖片上，只需要提供坐標傳給后端就可以了，但是我想直接生成圖片出來，通過不斷嘗試，終于完成了此功能

分析

主要實現思路是

將gif動圖經過gif庫解析成gif實例
遍歷獲取gif實例的每一幀的canvas，轉換成baseURL，再轉一份file對象存放起來
將轉換后的baseURL通過fabric展示到canvas界面上，并添加文字實現文字任意操作功能
將每一幀圖片合成后生成新的gif圖片

使用教程

工具從上往下一共分為3個區域

畫布區

將分解的圖片和添加的文字顯示在畫布中

選擇區

上傳圖片 直接本電腦中選中文件上傳
填寫鏈接輸入框 填寫一個線上的gif圖片地址，如果圖片解析不出來，解決方法是下載圖片出來，再使用上方上傳，原因是圖片不支持跨域
分段選項 將gif解析出來的圖片分成幾個區域顯示，支持2 3 4
幀間隔 預覽或者生成的gif中每一幀圖片的顯示間隔時間，最小取值0.02，單位s
圖片大小 生成圖片的大小，默認300px，單位px
預覽圖片 僅供預覽觀看，默認寬300px，高自適應
生成圖片 可以下載圖片使用

屬性操作區

每一個方格對應畫布中每一個區域的文字屬性
最后一個方格可以控制操作全部文字
注: 文字位置不要偏離對應的那張圖片中，要不然會出現圖片消失或顯示不完整

屬性詳解

屬性	說明	默認
幀數	每一段區域圖片數量	自動計算，也可點擊下方+ -號設置
左邊距	文字距離左邊框距離	0
上邊距	文字距離上邊框距離	0

備注

本人是在谷歌瀏覽器調試開發的，沒有考慮任何兼容問題，最好在谷歌瀏覽器使用
點擊生成圖片后，可以將生成圖片下載出來，如需使用請注意版權問題，如出現版權糾紛，本庫概不負責
如有其它問題請下方留言

特別感謝

GIF圖片分幀buzzfeed/libgif-js
canvas操作fabric.js
生成GIF圖片yahoo/gifshot

創作不易，如果對你有幫助，請移步gitHub地址給個星星 star✨✨ 謝謝

總結

以上是生活随笔為你收集整理的GIF动态图片分解,多帧动态图分解成多张静态图片的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。