前言
去年在博客中發(fā)了兩篇關(guān)于GIF動態(tài)生成的博客，GIF圖像動態(tài)生成-JAVA后臺生成和基于FFmpeg的Java視頻Mp4轉(zhuǎn)GIF初探，在這兩篇博客中都是采用JAVA語言在后臺進行轉(zhuǎn)換。使用JAVA的同學(xué)經(jīng)過自己的改造和開發(fā)也可以應(yīng)用在項目上。前段時間有朋友私下問，有沒有不使用Java，甚至不依賴于后臺的，直接基于前端的GIF動圖生成，有沒有這種技術(shù)方案。博主個人對前端不是很擅長，后來也是在github上自習(xí)搜索了一番，發(fā)現(xiàn)了一個比較有意思的，可以直接在前端使用的gif動態(tài)圖生成組件。本文重點聊聊gif.js組件，介紹一下gif這個組件的基本原理，在生產(chǎn)中如何進行使用。
一、GIF.JS簡介
1、gif.js是什么
gif.js在github的地址是：gif.js,打開它的官方網(wǎng)站，可以看到如下的介紹：
作為一款成熟的插件，在github上有4.5k的star，足以說明它的受歡迎程度。而且gif.js采用的是寬松的MIT協(xié)議，您可以隨意下載這個插件，再此基礎(chǔ)之上改造成自己的工具供別人使用。使用git clone將工程下載到本地后，可以看到gif.js的初始目錄。
2、gif.js基礎(chǔ)依賴
打開工程目錄的package.json文件，這里定義了文件基礎(chǔ)依賴。打開后可以看到如下的定義信息：
-
-
-
-
"description": "JavaScript GIF encoding library",
-
"author": "Johan Nordberg <code@johan-nordberg.com>",
-
-
"repository": "https://github.com/jnordberg/gif.js.git",
-
-
-
-
-
-
-
-
"prepublish": "./bin/build"
-
-
"browser": "./dist/gif.js",
-
-
-
-
-
-
-
"readmeFilename": "README.md"
-
3、關(guān)鍵基礎(chǔ)類解析
在GIFEncoder.js文件中定義了gif.js對象了基本一些屬性，在上面的目錄中打開目標(biāo)文件后，可以看到屬性定義方法：
核心方法API說明：您可以使用構(gòu)造方法或者使用setOptions（）方法類設(shè)置相關(guān)的屬性。詳情可以看下面的說明：
|
Name
|
Default
|
Description
|
|
repeat
|
0
|
repeat count, -1 = no repeat, 0 = forever
|
|
quality
|
10
|
pixel sample interval, lower is better
|
|
workers
|
2
|
number of web workers to spawn
|
|
workerScript
|
gif.worker.js
|
url to load worker script from
|
|
background
|
#fff
|
background color where source image is transparent
|
|
width
|
null
|
output image width
|
|
height
|
null
|
output image height
|
|
transparent
|
null
|
transparent hex color, 0x00FF00 = green
|
|
dither
|
false
|
dithering method, e.g. FloydSteinberg-serpentine
|
|
debug
|
false
|
whether to print debug information to console
|
二、gif.js實戰(zhàn)
下面采用具體的代碼進行一個實際例子的實踐。
1、新建html工程
這里以video2.html為例，在這個工程中引入了gif.js和gif.worker.js。工程目錄如下，Jquery.js作為非必須依賴。
-
-
-
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
-
<title>視頻轉(zhuǎn)GIF</title>
-
<meta name="description" content="Full-featured JavaScript GIF encoder that runs in your browser.">
-
<meta name="keywords" content="gif, encoder, animation, browser, unicorn">
-
<meta name="viewport" content="width=device-width">
-
<meta property="og:title" content="gif.js">
-
<meta property="og:url" content="http://jnordberg.github.io/gif.js">
-
<meta property="og:description" content="Full-featured JavaScript GIF encoder that runs in your browser.">
-
<meta property="og:type" content="website">
-
<link rel="stylesheet" href="main.css">
-
<script src="gif.js?v=3"></script>
-
<script src="video.js?v=3"></script>
-
2、定義gif對象
-
-
-
workerScript: 'gif.worker.js',
-
-
-
定義好了gif對象之后，還需要定義相應(yīng)的響應(yīng)事件，如下代碼所示：
-
sample.addEvent('change', sampleUpdate);
-
-
button.addEvent('click', function() {
-
-
-
-
-
-
-
-
gif.on('start', function() {
-
return startTime = now();
-
-
-
gif.on('progress', function(p) {
-
return info.set('text', "rendering: " + (Math.round(p * 100)) + "%");
-
-
-
gif.on('finished', function(blob) {
-
-
img = document.id('result');
-
img.src = URL.createObjectURL(blob);
-
delta = now() - startTime;
-
console.log("done in\n" + ((delta / 1000).toFixed(2)) + "sec,\nsize " + ((blob.size / 1000).toFixed(2)) + "kb");
-
return info.set('text', "done in\n" + ((delta / 1000).toFixed(2)) + "sec,\nsize " + ((blob.size / 1000).toFixed(2)) + "kb");
-
代碼有點長，這里不一一列出，需要源代碼的可以私信。
3、最后效果
使用nginx進行靜態(tài)發(fā)布后，可以看到如下的效果：
點擊執(zhí)行按鈕后，在網(wǎng)頁下面生成gif動態(tài)圖，如下所示：
實際生成的動態(tài)圖會根據(jù)原始視頻的大小，畫質(zhì)質(zhì)量，清晰度等因素影響，執(zhí)行時間也會有影響。在實際項目中需要根據(jù)需要調(diào)整相應(yīng)的參數(shù)才可以。
4、執(zhí)行分析
以完成后渲染動圖為例講解合成過程，
可以在變量區(qū)看到客戶端開啟了多個Worker進行并行處理。
在這里進行數(shù)據(jù)合并處理，如下：
最終合成gif圖片，在html中進行dom渲染。
三、總結(jié)
以上就是本文的主要內(nèi)容，本文重點介紹了一款前端基于Javascript的gif.js生成插件，分析了它的源碼結(jié)構(gòu)，最后通過一個實例進行了案例講解，幫您快速的了解和掌握這個組件，文章行文倉促，如有錯誤，請留言交流。
藍藍設(shè)計建立了UI設(shè)計分享群，每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計，如果有興趣的話，可以進入一起成長學(xué)習(xí)，請加微信ban_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~
希望得到建議咨詢、商務(wù)合作，也請與我們聯(lián)系01063334945。
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責(zé)聲明：藍藍設(shè)計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍藍設(shè)計( www.bouu.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)、UI設(shè)計公司、界面設(shè)計公司、UI設(shè)計服務(wù)公司、數(shù)據(jù)可視化設(shè)計公司、UI交互設(shè)計公司、高端網(wǎng)站設(shè)計公司、UI咨詢、用戶體驗公司、軟件界面設(shè)計公司。
