by from
本文可全文轉載，但需要保留原作者和出處。
一、這兩天做了個可傳圖可寫臺詞GIF生成器
這兩天晚上在家做了個可以自己傳圖，可以自己寫臺詞的GIF生成器。
您可以狠狠地點擊這里：Gif表情自定義字幕在線生成器
可以用提供的模板生成GIF表情，例如，我們選擇“今天的風甚為喧鬧”，我們可以自己修改臺詞，修改GIF這一幀延遲時間。
流量開銷傷不起，模板圖片都是自己主機做圖床，舍不得提供過多圖片序列，因此，生成GIF的素材掉幀有些嚴重，見諒見諒，感受精髓，感受精髓。
然后，生成GIF效果就是下面圖這樣：
如果嫌棄提供的模板太簡陋，可以自己上傳序列圖片DIY，例如使用上一篇文章中用到的的圖片序列素材：
然后填寫臺詞：“給你一個飛吻”“么啊”，然后生成，就有下面質量不錯的GIF效果了（點擊播放200多K）：
重點是這個工具純前端生成的
表情生成器工具很多，簡單的如靜態圖生成器，靜態圖上面臺詞可以修改；復雜點的動態GIF表情生成器，例如可能有人已經用過的“表情鍋”：
目前已經有好幾十個模板了，訪問量應該可以，因為我看到guang gao都出來了。
但是小工具是后端圖片服務主導實現的，于是就有這樣問題：
服務器開銷不小，壓力比較大；只能用對方提供的模板生成gif表情，不能使用自己的自定義素材，例如無法實現一個放飛自我的“飛吻”GIF表情；
實際上，純前端就能搞定GIF生成，資源開銷更小，速度更快，更加靈活！
二、如何JS純前端web生成GIF圖片呢？
本GIF表情生成器核心技術源自這個項目：
借助Web Workers, File API和類型數組在瀏覽器端進行GIF encode，從而生成GIF圖片。
語法相當簡單，下面代碼是官方示例，我簡單翻譯下：
var gif = new GIF({
workers: 2,
quality: 10
});
// 添加圖片元素
gif.addFrame(imageElement);
// 或者是canvas元素
gif.addFrame(canvasElement, {delay: 200});
// 或者從canvas的上下文復制像素信息
gif.addFrame(ctx, {copy: true});
gif.on('finished', function(blob) {
// 這里的blob就是gif圖片blod格式信息
window.open(URL.createObjectURL(blob));
});
gif.render();
三、GIF生成器中的字幕臺詞是怎么加上去的呢？
GIF生成器中的字幕臺詞是怎么加上去的呢？答案是使用canvas繪制的。
canvas先使用()方法繪制底圖，然后把輸入框中的對話信息繪制在底圖上就好了。
拿其中某一幀舉例示意：
var gif = new GIF({
width: width,
height: height
});
// 畫布元素
var canvas = document.createElement('canvas');
var context = canvas.getContext('2d');
// 繪制圖片
context.drawImage(img, 0, 0);
// 繪制文字
context.fillText(message, width / 2, height - 32);
// 作為幀插入GIF
gif.addFrame(context, {
delay: delay,
copy: true
});
四、本地上傳GIF幀圖片如何處理的？
本地上傳素材圖片和模板提供的類似，只是素材圖片預覽時候的src地址是base64地址。
無論是選擇上傳還是拖拽上傳，都可以get到圖片這個文件對象，假設變量名是file，則可以借助將圖片文件轉換成可預覽模式：
var reader = new FileReader();
reader.onload = function(e) {
// e.target.result就是圖片的base64地址信息
// 讓img的src屬性值為e.target.result圖片即可呈現
}
reader.readAsDataURL(file);
接下來的代碼邏輯就和模板圖片的處理一模一樣了。
五、結束語本工具UI組件由LuLu UI提供支持，LuLu UI —— 你問我有什么不同？只是更自由，更純粹，和用戶走得更近。歡迎反饋使用中遇到的問題，文章評論，或者微博私信都可以。本工具URL地址是：/sp/gif，特別的（special）gif，特別的愛給特別的你~我擦，我居然不自覺唱起來了~分享看到的一個關于幀和時間挺有意思的推文（日文翻譯版）：
按照上圖的說法，每幀時間為0.02秒，也就是20毫秒每幀，接近顯示器的繪制頻率，哈哈哈。對于GIF標簽圖而言，不需要這么高的幀率，每幀84毫秒用戶體驗也是可以接受的，頻率過高的GIF體積會很大，有的甚至達4~5M，對于web環境，是不太適合的。
以上為本文全部內容，感謝閱讀！
本文為原創文章，會經常更新知識點以及修正一些錯誤，因此轉載請保留原出處，方便溯源，避免陳舊錯誤知識的誤導，同時有更好的閱讀體驗。