前言

去年在博客中發了兩篇關于GIF動態生成的博客，GIF圖像動態生成-JAVA后臺生成和基于FFmpeg的Java視頻Mp4轉GIF初探，在這兩篇博客中都是采用JAVA語言在后臺進行轉換。使用JAVA的同學經過自己的改造和開發也可以應用在項目上。前段時間有朋友私下問，有沒有不使用Java，甚至不依賴于后臺的，直接基于前端的GIF動圖生成，有沒有這種技術方案。博主個人對前端不是很擅長，后來也是在github上自習搜索了一番，發現了一個比較有意思的，可以直接在前端使用的gif動態圖生成組件。本文重點聊聊gif.js組件，介紹一下gif這個組件的基本原理，在生產中如何進行使用。

一、GIF.JS簡介

1、gif.js是什么

gif.js在github的地址是：gif.js,打開它的官方網站，可以看到如下的介紹：

作為一款成熟的插件，在github上有4.5k的star，足以說明它的受歡迎程度。而且gif.js采用的是寬松的MIT協議，您可以隨意下載這個插件，再此基礎之上改造成自己的工具供別人使用。使用git clone將工程下載到本地后，可以看到gif.js的初始目錄。

2、gif.js基礎依賴

打開工程目錄的package.json文件，這里定義了文件基礎依賴。打開后可以看到如下的定義信息：

    


        


            


            

        

        


            

                {
            

        

    

    


        


            


            

        

        


            

                "name": "gif.js",
            

        

    

    


        


            


            

        

        


            

                "version": "0.2.0",
            

        

    

    


        


            


            

        

        


            

                "description": "JavaScript GIF encoding library",
            

        

    

    


        


            


            

        

        


            

                "author": "Johan Nordberg <code@johan-nordberg.com>",
            

        

    

    


        


            


            

        

        


            

                "main": "index.js",
            

        

    

    


        


            


            

        

        


            

                "repository": "https://github.com/jnordberg/gif.js.git",
            

        

    

    


        


            


            

        

        


            

                "devDependencies": {
            

        

    

    


        


            


            

        

        


            

                "browserify": "^13.1.1",
            

        

    

    


        


            


            

        

        


            

                "coffeeify": "^2.1.0",
            

        

    

    


        


            


            

        

        


            

                "exorcist": "^0.4.0",
            

        

    

    


        


            


            

        

        


            

                "uglify-js": "^2.7.5"
            

        

    

    


        


            


            

        

        


            

                },
            

        

    

    


        


            


            

        

        


            

                "scripts": {
            

        

    

    


        


            


            

        

        


            

                "prepublish": "./bin/build"
            

        

    

    


        


            


            

        

        


            

                },
            

        

    

    


        


            


            

        

        


            

                "browser": "./dist/gif.js",
            

        

    

    


        


            


            

        

        


            

                "keywords": [
            

        

    

    


        


            


            

        

        


            

                "gif",
            

        

    

    


        


            


            

        

        


            

                "animation",
            

        

    

    


        


            


            

        

        


            

                "encoder"
            

        

    

    


        


            


            

        

        


            

                ],
            

        

    

    


        


            


            

        

        


            

                "license": "MIT",
            

        

    

    


        


            


            

        

        


            

                "readmeFilename": "README.md"
            

        

    

    


        


            


            

        

        


            

                }
            

        

    




    

3、關鍵基礎類解析

在GIFEncoder.js文件中定義了gif.js對象了基本一些屬性，在上面的目錄中打開目標文件后，可以看到屬性定義方法：

核心方法API說明：您可以使用構造方法或者使用setOptions（）方法類設置相關的屬性。詳情可以看下面的說明：

二、gif.js實戰

下面采用具體的代碼進行一個實際例子的實踐。

1、新建html工程

這里以video2.html為例，在這個工程中引入了gif.js和gif.worker.js。工程目錄如下，Jquery.js作為非必須依賴。

    


        


            


            

        

        


            

                <head>
            

        

    

    


        


            


            

        

        


            

                <meta charset="utf-8">
            

        

    

    


        


            


            

        

        


            

                <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
            

        

    

    


        


            


            

        

        


            

                <title>視頻轉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>
            

        

    

    


        


            


            

        

        


            

                </head>
            

        

    




    

2、定義gif對象

    


        


            


            

        

        


            

                gif = new GIF({
            

        

    

    


        


            


            

        

        


            

                workers: 4,
            

        

    

    


        


            


            

        

        


            

                workerScript: 'gif.worker.js',
            

        

    

    


        


            


            

        

        


            

                width: 600,
            

        

    

    


        


            


            

        

        


            

                height: 337
            

        

    

    


        


            


            

        

        


            

                });
            

        

    

定義好了gif對象之后，還需要定義相應的響應事件，如下代碼所示：

    


        


            


            

        

        


            

                sample.addEvent('change', sampleUpdate);
            

        

    

    


        


            


            

        

        


            


            

        

    

    


        


            


            

        

        


            

                button.addEvent('click', function() {
            

        

    

    


        


            


            

        

        


            

                video.pause();
            

        

    

    


        


            


            

        

        


            

                video.currentTime = 0;
            

        

    

    


        


            


            

        

        


            

                gif.abort();
            

        

    

    


        


            


            

        

        


            

                gif.frames = [];
            

        

    

    


        


            


            

        

        


            

                return video.play();
            

        

    

    


        


            


            

        

        


            

                });
            

        

    

    


        


            


            

        

        


            


            

        

    

    


        


            


            

        

        


            

                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) {
            

        

    

    


        


            


            

        

        


            

                var delta, img;
            

        

    

    


        


            


            

        

        


            

                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進行靜態發布后，可以看到如下的效果：

點擊執行按鈕后，在網頁下面生成gif動態圖，如下所示：

實際生成的動態圖會根據原始視頻的大小，畫質質量，清晰度等因素影響，執行時間也會有影響。在實際項目中需要根據需要調整相應的參數才可以。

4、執行分析

以完成后渲染動圖為例講解合成過程，

可以在變量區看到客戶端開啟了多個Worker進行并行處理。

在這里進行數據合并處理，如下：

最終合成gif圖片，在html中進行dom渲染。

三、總結

以上就是本文的主要內容，本文重點介紹了一款前端基于Javascript的gif.js生成插件，分析了它的源碼結構，最后通過一個實例進行了案例講解，幫您快速的了解和掌握這個組件，文章行文倉促，如有錯誤，請留言交流。

藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請加微信ban_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~

希望得到建議咨詢、商務合作，也請與我們聯系01063334945。 



分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。 



藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司。