Javascript實現逐幀分解gif動態圖,支持自定義編輯生成gif

體驗地址

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

背景

爲何要製做這麼一款工具html

最近在作一款表情包的產品,須要將文字生成到gif圖片中,並能夠控制文字顯示的位置,並將不一樣的文字顯示在不一樣的圖片上,只須要提供座標傳給後端就能夠了,可是我想直接生成圖片出來,經過不斷嘗試,終於完成了此功能

分析

主要實現思路是git

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

使用教程

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

畫布區

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

選擇區

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

屬性操做區

  • 每個方格對應畫布中每個區域的文字屬性
  • 最後一個方格能夠控制操做所有文字

注: 文字位置不要偏離對應的那張圖片中,要否則會出現圖片消失或顯示不完整後端

屬性詳解

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

備註

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

特別感謝

創做不易,若是對你有幫助,請移步 gitHub地址給個星星 star✨✨ 謝謝
相關文章
相關標籤/搜索