前言去年在博客中发了两篇关于GIF灵活生成的博客，GIF图像灵活生成，JAVA后盾生成和基于FFmpeg的Java视频Mp4转GIF初探，在这两篇博客中都是驳回JAVA言语在后盾启动转换，经常使用JAVA的同窗经过自己的变革和开发也可以运行在名目上，前段期间有好友私下问，有没有不经常使用Java，甚至不依赖于后盾的，间接基于前端的GI...。
前言
去年在博客中发了两篇关于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（）方法类设置关系的属性。概略可以看上方的说明：
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实战
上方驳回详细的代码启动一个实践例子的通常。
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生成插件，剖析了它的源码结构，最后经过一个实例启动了案例解说，帮您极速的了解和把握这个组件，文章行文匆促，如有失误，请留言交换。
还没有评论，来说两句吧...