位置: IT常识 - 正文

前端直接生成GIF动态图实践(前端生成docx)

编辑:rootadmin
前端直接生成GIF动态图实践 前言

推荐整理分享前端直接生成GIF动态图实践(前端生成docx),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:前端生成图片并下载,快速生成前端页面,前端生成图片,前端生成guid,前端动态生成表格,前端生成工具,前端动态生成表格,前端生成图片,内容如对您有帮助,希望把文章链接给更多的朋友!

去年在博客中发了两篇关于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

前端直接生成GIF动态图实践(前端生成docx)

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生成插件,分析了它的源码结构,最后通过一个实例进行了案例讲解,帮您快速的了解和掌握这个组件,文章行文仓促,如有错误,请留言交流。

本文链接地址:https://www.jiuchutong.com/zhishi/297416.html 转载请保留说明!

上一篇:npm install或npm i后没有依赖包node_modules?

下一篇:CSS页面布局(超详解)(div css页面布局)

  • Win10怎么看显卡配置(win10怎么看显卡显存)

    Win10怎么看显卡配置(win10怎么看显卡显存)

  • 蚂蚁心愿钱如何转出(蚂蚁心愿的钱可以直接花么)

    蚂蚁心愿钱如何转出(蚂蚁心愿的钱可以直接花么)

  • 拼多多我的好友在哪(拼多多我的好友在哪里删除)

    拼多多我的好友在哪(拼多多我的好友在哪里删除)

  • 腾讯课堂学生能看自己的在线时长吗(腾讯课堂学生能看到学生名单吗)

    腾讯课堂学生能看自己的在线时长吗(腾讯课堂学生能看到学生名单吗)

  • 怎么把微博水印放下面(怎么把微博水印关掉)

    怎么把微博水印放下面(怎么把微博水印关掉)

  • win7网络共享中心在哪(win7网络共享中心在哪里)

    win7网络共享中心在哪(win7网络共享中心在哪里)

  • 关机了还显示微信步数(关机了还显示微信电脑登录)

    关机了还显示微信步数(关机了还显示微信电脑登录)

  • nat1 nat2 nat3 区别(h3c下一页)

    nat1 nat2 nat3 区别(h3c下一页)

  • qq空间划过算浏览吗(qq空间浏览次数机制)

    qq空间划过算浏览吗(qq空间浏览次数机制)

  • 结束运行有什么影响吗(结束运行有什么影响吗微信)

    结束运行有什么影响吗(结束运行有什么影响吗微信)

  • 怎么鉴别airpods2真假(怎么鉴别airpods)

    怎么鉴别airpods2真假(怎么鉴别airpods)

  • 天猫可以自己入驻吗(天猫自己入驻难度高吗)

    天猫可以自己入驻吗(天猫自己入驻难度高吗)

  • 如何在自己手机上查看别人的微信聊天记录(如何在自己手机上查看自己的电话号码)

    如何在自己手机上查看别人的微信聊天记录(如何在自己手机上查看自己的电话号码)

  • 淘宝的等级怎么划分的(淘宝的等级怎么升级)

    淘宝的等级怎么划分的(淘宝的等级怎么升级)

  • oppofindx2屏幕大小(oppofindx2pro屏幕大小)

    oppofindx2屏幕大小(oppofindx2pro屏幕大小)

  • 电脑打字下一行是哪个键(电脑打字下一行怎么弄)

    电脑打字下一行是哪个键(电脑打字下一行怎么弄)

  • 苹果a1691是全网通吗(苹果手机a1691是什么型号)

    苹果a1691是全网通吗(苹果手机a1691是什么型号)

  • xsmax开机按哪个键(苹果xsmax开机键在哪里)

    xsmax开机按哪个键(苹果xsmax开机键在哪里)

  • 微信有必要更新版本吗(微信需不需要更新新版本)

    微信有必要更新版本吗(微信需不需要更新新版本)

  • 怎么下载网站上视频(怎么下载网站上的文字)

    怎么下载网站上视频(怎么下载网站上的文字)

  • 6spwifi提示密码错误(6splus连接wifi显示密码错误)

    6spwifi提示密码错误(6splus连接wifi显示密码错误)

  • 怪兽充电宝哪里可以还(怪兽充电宝多少钱一小时)

    怪兽充电宝哪里可以还(怪兽充电宝多少钱一小时)

  • 微信收款延迟怎么解决(微信收款 延迟)

    微信收款延迟怎么解决(微信收款 延迟)

  • 手机正常多久掉一格电(手机多久掉一度电算正常)

    手机正常多久掉一格电(手机多久掉一度电算正常)

  • 公司代扣代缴个人所得税如何退税
  • 北京增值税发票网上申领流程
  • 净值型理财投资范围
  • 发票已经报送怎么处理
  • 固定成本和变动成本之和称作
  • 差旅费处理会计分录
  • 住房贷款专项扣除
  • 一般纳税人销项税和进项税如何抵扣
  • 税法关于发票丢失的
  • 以前年度损益调整结转到未分配利润
  • 分公司与总公司承担责任的法律规定
  • 冲销暂估入库如何做会计核算?
  • 税务退税会计分录
  • 提取公积金收费比例
  • 公司如何持续发展
  • 事业单位需要写自传吗
  • 关于固定资产管理
  • 公益性捐赠公告
  • 事业单位开发成本占比
  • 股票股利为什么不影响所有者权益
  • 坏账准备金最新计算公式
  • 应税劳务、服务清单
  • 新注册的公司用不用开公户
  • 报税期间如何开发票?
  • 生产领用包装物计入哪里
  • 门店出纳的工作内容
  • 车站计算机系统组成
  • 企业当期产生的外币报表折算差额
  • php parse_url
  • linux系统之间拷贝文件命令
  • 分公司与总公司的关系
  • nerosmartstart.exe - nerosmartstart是什么进程 作用是什么
  • 应缴纳所得税额怎么算
  • 鸟瞰高耸入云的成语
  • 实际成本法核算会计分录
  • 企业类型变更是什么意思
  • php提示框
  • code particle
  • gridview功能
  • 持有至到期投资账务处理
  • 营业外收支的账户是什么
  • phpcms教程
  • 定金罚则可以约定吗
  • 允许从销项税额中扣除的有
  • 收付转凭证和记帐凭证的区别?
  • 研发人员工资是实发还是应发
  • 结转本年利润的摘要怎么写
  • 主营业务成本里的工资
  • 资本公积现金流量表里放在哪里
  • 企业主要的工会是什么
  • 车船税没发票只交可以吗
  • 外派员工的薪酬构成有哪些项目
  • foxmail反应慢的原因
  • 微软官方操作系统叫什么
  • win7系统桌面设置
  • win8系统搜索在哪里
  • rasman.exe - rasman是什么进程 有什么作用
  • 如何进入xp系统
  • windos8怎么样
  • win10在更新界面怎么办
  • linux的top参数
  • linux如何结束正在运行的进程
  • win8不能安装软件
  • cocos2dx schedule
  • opengl perspective
  • python erf
  • node js作用
  • 批处理保存文件
  • unity教程完整版
  • typescript concat
  • jquery页面跳转的方法
  • jquery 滑动显示
  • java script教程
  • 在javascript中如何定义并调用函数
  • javascript语言基础
  • time模块 python
  • js按下回车键时提交
  • asyncio使用
  • 北京国家税务局官网
  • 云南省国税发票查询真伪查询
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设