體驗地址
- 工具地址 因爲掛載在github page上,打開速度會慢一些,請耐心等待或自行解決git網速問題
背景
爲何要製做這麼一款工具html
最近在作一款表情包的產品,須要將文字生成到gif圖片中,並能夠控制文字顯示的位置,並將不一樣的文字顯示在不一樣的圖片上,只須要提供座標傳給後端就能夠了,可是我想直接生成圖片出來,經過不斷嘗試,終於完成了此功能
分析
主要實現思路是git
- 將gif動圖通過gif庫解析成gif實例
- 遍歷獲取gif實例的每一幀的canvas,轉換成baseURL,再轉一份file對象存放起來
- 將轉換後的baseURL經過fabric展現到canvas界面上,並添加文字實現文字任意操做功能
- 將每一幀圖片合成後生成新的gif圖片
使用教程
工具從上往下一共分爲3個區域github
畫布區
將分解的圖片和添加的文字顯示在畫布中canvas
選擇區
- 上傳圖片 直接本電腦中選中文件上傳
- 填寫連接輸入框 填寫一個線上的gif圖片地址,若是圖片解析不出來,解決方法是下載圖片出來,再使用上方上傳,緣由是圖片不支持跨域
- 分段選項 將gif解析出來的圖片分紅幾個區域顯示,支持2 3 4
- 幀間隔 預覽或者生成的gif中每一幀圖片的顯示間隔時間,最小取值0.02,單位s
- 圖片大小 生成圖片的大小,默認300px,單位px
- 預覽圖片 僅供預覽觀看,默認寬300px,高自適應
- 生成圖片 能夠下載圖片使用
屬性操做區
- 每個方格對應畫布中每個區域的文字屬性
- 最後一個方格能夠控制操做所有文字
注: 文字位置不要偏離對應的那張圖片中,要否則會出現圖片消失或顯示不完整後端
屬性詳解
屬性 |
說明 |
默認 |
幀數 |
每一段區域圖片數量 |
自動計算,也可點擊下方+ -號設置 |
左邊距 |
文字距離左邊框距離 |
0 |
上邊距 |
文字距離上邊框距離 |
0 |
備註
- 本人是在谷歌瀏覽器調試開發的,沒有考慮任何兼容問題,最好在谷歌瀏覽器使用
- 點擊生成圖片後,能夠將生成圖片下載出來,如需使用請注意版權問題,如出現版權糾紛,本庫概不負責
- 若有其它問題請下方留言
特別感謝
創做不易,若是對你有幫助,請移步
gitHub地址給個星星 star✨✨ 謝謝