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);
### HTTP
* HTTP 报文结构是怎样的?
* HTTP有哪些请求方法?
* GET 和 POST 有什么区别?
* 如何理解 URI?
* 如何理解 HTTP 状态码?
* 简要概括一下 HTTP 的特点?HTTP 有哪些缺点?
* 对 Accept 系列字段了解多少?
* 对于定长和不定长的数据,HTTP 是怎么传输的?
* HTTP 如何处理大文件的传输?
* HTTP 中如何处理表单数据的提交?
* HTTP1.1 如何解决 HTTP 的队头阻塞问题?
* 对 Cookie 了解多少?
* 如何理解 HTTP 代理?
* 如何理解 HTTP 缓存及缓存代理?
* 为什么产生代理缓存?
* 源服务器的缓存控制
* 客户端的缓存控制
* 什么是跨域?浏览器如何拦截响应?如何解决?
**[开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/topics/618166371)**
![](https://img-blog.csdnimg.cn/img_convert/3a28cc7b978db5d78ce5f1c5ec78122b.png)