前端直接生成GIF动态图实践_gif(1)，零基础学习前端

用户33914928060
83 阅读4分钟

结尾

正式学习前端大概 3 年多了，很早就想整理这个书单了，因为常常会有朋友问，前端该如何学习，学习前端该看哪些书，我就讲讲我学习的道路中看的一些书，虽然整理的书不多，但是每一本都是那种看一本就秒不绝口的感觉。

以下大部分是我看过的，或者说身边的人推荐的书籍，每一本我都有些相关的推荐语，如果你有看到更好的书欢迎推荐呀。

前端学习书籍导图-1 开源分享：docs.qq.com/doc/DSmRnRG…

作为一款成熟的插件，在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（）方法类设置相关的属性。详情可以看下面的说明：

NameDefaultDescription
repeat0repeat count, -1 = no repeat, 0 = forever
quality10pixel sample interval, lower is better
workers2number of web workers to spawn
workerScriptgif.worker.jsurl to load worker script from
background#fffbackground color where source image is transparent
widthnulloutput image width
heightnulloutput image height
transparentnulltransparent hex color, 0x00FF00 = green
ditherfalsedithering method, e.g. FloydSteinberg-serpentine
debugfalsewhether 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进行静态发布后，可以看到如下的效果：

TCP协议

  • TCP 和 UDP 的区别？
  • TCP 三次握手的过程？
  • 为什么是三次而不是两次、四次？
  • 三次握手过程中可以携带数据么？
  • 说说 TCP 四次挥手的过程
  • 为什么是四次挥手而不是三次？
  • 半连接队列和 SYN Flood 攻击的关系
  • 如何应对 SYN Flood 攻击？
  • 介绍一下 TCP 报文头部的字段
  • TCP 快速打开的原理(TFO)
  • 说说TCP报文中时间戳的作用？
  • TCP 的超时重传时间是如何计算的？
  • TCP 的流量控制
  • TCP 的拥塞控制
  • 说说 Nagle 算法和延迟确认？
  • 如何理解 TCP 的 keep-alive？

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

浏览器篇

  • 浏览器缓存?
  • 说一说浏览器的本地存储？各自优劣如何？
  • 说一说从输入URL到页面呈现发生了什么？
  • 谈谈你对重绘和回流的理解
  • XSS攻击
  • CSRF攻击
  • HTTPS为什么让数据传输更安全？
  • 实现事件的防抖和节流？
  • 实现图片懒加载？

avatar
文章
阅读
粉丝