體驗地址
- 工具地址 由於掛載在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✨✨ 謝謝