鬥圖神器--純前端實現視頻轉GIF製做表情包（已開源）

視頻轉GIF

在線體驗 coldday.github.io/mp4ToGif/

Chrome瀏覽器插件安裝點這裏 點這安裝

背景

視頻轉GIF

上面這張圖你們都見過吧，哈哈

如今聊天時候少不了鬥圖，光發靜圖逼格略低了些，GIF在鬥圖中確定略勝一籌，手繪動畫生成GIF對大多數人來講要求搞了些，不過給某人拍個搞笑的短視頻，再加點逗比文字，哈哈，今後你就走上的鬥圖高手之列，沒人敢惹你，一言不合就鬥圖

網上搜一下視頻製做表情包，也搜到了幾個，可是很少，並且大部分只是單純的轉GIF，能夠添加文字的用起來也不是很方便。

更可怕的是有的製做GIF的網址超過60幀就要開通VIP，呵呵，看不下去！ 因此我決定本身貢獻一個免費好用的表情包製做工具

工具主要就界面以下

工具概覽

工具不只提供視頻轉GIF功能，並且在轉換GIF的同時還能添加文字，精確到每一幀，想讓文字顯示在哪一個位置、時間，以及文字大小顏色均可以設置，所有都是瀏覽器本地生成，沒有任何網絡請求，離線也能使用。內容隨意更改，點擊生成就能獲得修改後的GIF

使用教程

使用介紹

實現過程

1. 視頻播放時經過canvas將每一幀原圖保存到全局數組FPS_LIST中，同時須要把每一幀的播放時間存到圖片中，視頻在播放的時候，點擊文字定位圖標，獲取當前視頻播放時間，填充到文字時間輸入框中
2. 點擊生成須要從新遍歷FPS_LIST，爲每一幀添加文字，這裏須要注意的時，每行文字都有本身對應顯示的時間範圍，因此須要判斷文字繪製在那一幀圖片中。而後生成新的圖片數組GIF_IMG_LIST
3. 將圖片交給gifshot，最後獲得生成後的GIF

是否是很簡單

須要聲明的是前端生成GIF底層藉助一個開源的js庫，github.com/yahoo/gifsh… 本工具是在它的基礎上進行的二次開發,感謝做者開源貢獻

關於谷歌瀏覽器開發，能夠查看在線文檔

工具具體實現能夠訪問個人github查看源代碼，核心代碼僅200行，若是對你有幫助，也歡迎 Star

但願個人工具可以給愛鬥圖的朋友們帶來一些樂趣