前言

去年在博客中发了两篇关于GIF动态生成的博客&＃xff0c;GIF图像动态生成-JAVA后台生成和基于FFmpeg的Java视频Mp4转GIF初探&＃xff0c;在这两篇博客中都是采用JAVA语言在后台进行转换。使用JAVA的同学经过自己的改造和开发也可以应用在项目上。前段时间有朋友私下问&＃xff0c;有没有不使用Java&＃xff0c;甚至不依赖于后台的&＃xff0c;直接基于前端的GIF动图生成&＃xff0c;有没有这种技术方案。博主个人对前端不是很擅长&＃xff0c;后来也是在github上自习搜索了一番&＃xff0c;发现了一个比较有意思的&＃xff0c;可以直接在前端使用的gif动态图生成组件。本文重点聊聊gif.js组件&＃xff0c;介绍一下gif这个组件的基本原理&＃xff0c;在生产中如何进行使用。

一、GIF.JS简介

1、gif.js是什么

gif.js在github的地址是&＃xff1a;gif.js,打开它的官方网站&＃xff0c;可以看到如下的介绍&＃xff1a;

作为一款成熟的插件&＃xff0c;在github上有4.5k的star&＃xff0c;足以说明它的受欢迎程度。而且gif.js采用的是宽松的MIT协议&＃xff0c;您可以随意下载这个插件&＃xff0c;再此基础之上改造成自己的工具供别人使用。使用git clone将工程下载到本地后&＃xff0c;可以看到gif.js的初始目录。

2、gif.js基础依赖

打开工程目录的package.json文件&＃xff0c;这里定义了文件基础依赖。打开后可以看到如下的定义信息&＃xff1a;

{"name": "gif.js","version": "0.2.0","description": "Javascript GIF encoding library","author": "Johan Nordberg ","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对象了基本一些属性&＃xff0c;在上面的目录中打开目标文件后&＃xff0c;可以看到属性定义方法&＃xff1a;

核心方法API说明&＃xff1a;您可以使用构造方法或者使用setOptions&＃xff08;&＃xff09;方法类设置相关的属性。详情可以看下面的说明&＃xff1a;

二、gif.js实战

下面采用具体的代码进行一个实际例子的实践。

1、新建html工程

这里以video2.html为例&＃xff0c;在这个工程中引入了gif.js和gif.worker.js。工程目录如下&＃xff0c;Jquery.js作为非必须依赖。

2、定义gif对象

gif &＃61; new GIF({workers: 4,workerScript: &＃39;gif.worker.js&＃39;,width: 600,height: 337});

定义好了gif对象之后&＃xff0c;还需要定义相应的响应事件&＃xff0c;如下代码所示&＃xff1a;

sample.addEvent(&＃39;change&＃39;, sampleUpdate);button.addEvent(&＃39;click&＃39;, function() {video.pause();video.currentTime &＃61; 0;gif.abort();gif.frames &＃61; [];return video.play();
});gif.on(&＃39;start&＃39;, function() {return startTime &＃61; now();
});gif.on(&＃39;progress&＃39;, function(p) {return info.set(&＃39;text&＃39;, "rendering: " &＃43; (Math.round(p * 100)) &＃43; "%");
});gif.on(&＃39;finished&＃39;, function(blob) {var delta, img;img &＃61; document.id(&＃39;result&＃39;);img.src &＃61; URL.createObjectURL(blob);delta &＃61; now() - startTime;console.log("done in\n" &＃43; ((delta / 1000).toFixed(2)) &＃43; "sec,\nsize " &＃43; ((blob.size / 1000).toFixed(2)) &＃43; "kb");return info.set(&＃39;text&＃39;, "done in\n" &＃43; ((delta / 1000).toFixed(2)) &＃43; "sec,\nsize " &＃43; ((blob.size / 1000).toFixed(2)) &＃43; "kb");
});

代码有点长&＃xff0c;这里不一一列出&＃xff0c;需要源代码的可以私信。

3、最后效果

使用nginx进行静态发布后&＃xff0c;可以看到如下的效果&＃xff1a;

点击执行按钮后&＃xff0c;在网页下面生成gif动态图&＃xff0c;如下所示&＃xff1a;

实际生成的动态图会根据原始视频的大小&＃xff0c;画质质量&＃xff0c;清晰度等因素影响&＃xff0c;执行时间也会有影响。在实际项目中需要根据需要调整相应的参数才可以。

4、执行分析

以完成后渲染动图为例讲解合成过程&＃xff0c;

可以在变量区看到客户端开启了多个Worker进行并行处理。

在这里进行数据合并处理&＃xff0c;如下&＃xff1a;

最终合成gif图片&＃xff0c;在html中进行dom渲染。

三、总结

以上就是本文的主要内容&＃xff0c;本文重点介绍了一款前端基于Javascript的gif.js生成插件&＃xff0c;分析了它的源码结构&＃xff0c;最后通过一个实例进行了案例讲解&＃xff0c;帮您快速的了解和掌握这个组件&＃xff0c;文章行文仓促&＃xff0c;如有错误&＃xff0c;请留言交流。