小码前端开发 2023-03-14

前端实现GIF动态图直接生成实践

文章目录隐藏

一、GIF.JS 简介

1、gif.js 是什么?
2、gif.js 基础依赖
3、关键基础类解析

二、gif.js 实战

1、新建 html 工程
2、定义 gif 对象
3、最后效果
4、执行分析

三、总结

前段时间有朋友私下问，有没有不使用 Java，甚至不依赖于后台的，直接基于前端的 GIF 动图生成，有没有这种技术方案。博主个人对前端不是很擅长，后来也是在 github 上自习搜索了一番，发现了一个比较有意思的，可以直接在前端使用的 gif 动态图生成组件。本文重点聊聊 gif.js 组件，介绍一下 gif 这个组件的基本原理，在生产中如何进行使用。

一、GIF.JS 简介

1、gif.js 是什么?

gif.js 在 github 的地址是：点击这里，打开它的官方网站，可以看到如下的介绍：

作为一款成熟的插件，在 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 作为非必须依赖。

代码如下：

<a-button v-auth="'1000'" type="primary" class="mx-4"> 拥有 code ['1000']权限可见 </a-button><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");
});

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