好男人社区,六年级上册数学优化设计答案,中国建设银行联行号查询网站,zhongwen网站模板前言去年在博客中发了两篇关于GIF动态生成的博客#xff0c;GIF图像动态生成-JAVA后台生成和基于FFmpeg的Java视频Mp4转GIF初探#xff0c;在这两篇博客中都是采用JAVA语言在后台进行转换。使用JAVA的同学经过自己的改造和开发也可以应用在项目上。前段时间有朋友私下问…前言 去年在博客中发了两篇关于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 codejohan-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方法类设置相关的属性。详情可以看下面的说明NameDefaultDescriptionrepeat0repeat count, -1 no repeat, 0 foreverquality10pixel sample interval, lower is betterworkers2number of web workers to spawnworkerScriptgif.worker.jsurl to load worker script frombackground#fffbackground color where source image is transparentwidthnulloutput image widthheightnulloutput image heighttransparentnulltransparent hex color, 0x00FF00 greenditherfalsedithering method, e.g. FloydSteinberg-serpentinedebugfalsewhether to print debug information to console二、gif.js实战下面采用具体的代码进行一个实际例子的实践。1、新建html工程这里以video2.html为例在这个工程中引入了gif.js和gif.worker.js。工程目录如下Jquery.js作为非必须依赖。headmeta charsetutf-8meta http-equivX-UA-Compatible contentIEedge,chrome1title视频转GIF/titlemeta namedescription contentFull-featured JavaScript GIF encoder that runs in your browser.meta namekeywords contentgif, encoder, animation, browser, unicornmeta nameviewport contentwidthdevice-widthmeta propertyog:title contentgif.jsmeta propertyog:url contenthttp://jnordberg.github.io/gif.jsmeta propertyog:description contentFull-featured JavaScript GIF encoder that runs in your browser.meta propertyog:type contentwebsitelink relstylesheet hrefmain.cssscript srcgif.js?v3/scriptscript srcvideo.js?v3/script
/head2、定义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生成插件分析了它的源码结构最后通过一个实例进行了案例讲解帮您快速的了解和掌握这个组件文章行文仓促如有错误请留言交流。
