Chrome瀏覽器外掛安裝點這裡 點這安裝
背景
上面這張圖大家都見過吧，哈哈
現在聊天時候少不了鬥圖，光發靜圖逼格略低了些，GIF在鬥圖中肯定略勝一籌，手繪動畫生成GIF對大多數人來說要求搞了些，不過給某人拍個搞笑的短視訊，再加點逗比文字，哈哈，從此你就走上的鬥圖高手之列，沒人敢惹你，一言不合就鬥圖
網上搜一下視訊製作表情包，也搜到了幾個，但是不多，而且大部分只是單純的轉GIF，可以新增文字的用起來也不是很方便。
更可怕的是有的製作GIF的網址超過60幀就要開通VIP，呵呵，看不下去！所以我決定自己貢獻一個免費好用的表情包製作工具
工具主要就介面如下
工具不僅提供視訊轉GIF功能，而且在轉換GIF的同時還能新增文字，精確到每一幀，想讓文字顯示在哪個位置、時間，以及文字大小顏色都可以設定，全部都是瀏覽器本地生成，沒有任何網路請求，離線也能使用。內容隨意更改，點選生成就能得到修改後的GIF
使用教程
實現過程
- 視訊播放時通過canvas將每一幀原圖儲存到全域性陣列FPS_LIST中，同時需要把每一幀的播放時間存到圖片中，視訊在播放的時候，點選文字定點陣圖標，獲取當前視訊播放時間，填充到文字時間輸入框中
- 點選生成需要重新遍歷FPS_LIST，為每一幀新增文字，這裡需要注意的時，每行文字都有自己對應顯示的時間範圍，所以需要判斷文字繪製在那一幀圖片中。然後生成新的圖片陣列GIF_IMG_LIST
- 將圖片交給gifshot，最後得到生成後的GIF
是不是很簡單
需要宣告的是前端生成GIF底層藉助一個開源的js庫，github.com/yahoo/gifsh…本工具是在它的基礎上進行的二次開發,感謝作者開源貢獻
關於谷歌瀏覽器開發，可以檢視線上文件
工具具體實現可以訪問我的github檢視原始碼，核心程式碼僅200行，如果對你有幫助，也歡迎 Star