js实现GIF图片的分解和合成


Posted in Javascript onOctober 24, 2019

无意中看到一篇文章写得是关于纯前端处理GIF图片的问题,感觉挺有意思的所以自己也实现了一下;

主要用到的有两个第三方库:合成GIF图片的gif.js和分解的libgif.js;

分解GIF

1. 引入Git库

import SuperGif from './libgif.js'

2. 处理图片

var file = e.target.files[0];
 console.log(file.type.indexOf('image/gif'));
 load_gif(file);
function load_gif(gif_source) {
  var gifImg = document.getElementById('gifImg');
  // gif库需要img标签配置下面两个属性
  gifImg.setAttribute('rel:animated_src', URL.createObjectURL(gif_source))
  gifImg.setAttribute('rel:auto_play', '0')
 
  // 新建gif实例
  var rub = new SuperGif({ gif: gifImg } );
 
  var running = false;
  rub.load(function(){
  var img_list = [];
  var j = 0;
  console.log(rub.get_length());
  for (var i=1; i <= rub.get_length(); i++) {
  // 遍历gif实例的每一帧
  rub.move_to(i);
 
  var imgImage = new Image();
  //canvas生成base64图片数据
  imgImage.src = rub.get_canvas().toDataURL('image/jpeg',0.8);
  }
 }

合成GIF图片

1. 引入Git库

import GIF from './gif.js'

2. 图片合成

var gif = new GIF({
  workers: 2,
  quality: 10,
  workerScript: 'js/gif.worker.js'
});
var j = 0;
 
var canvas= document.createElement("canvas");
var ctx = tCanvas.getContext('2d');
 
for (var i=1; i <= len; i++) {
 
 var imgImage = new Image();
 imgImage.src = img;
 imgImage.onload = function (e) {
 
 //Canvas绘制图片
 canvas.width = width;
 canvas.height = height;
 console.log(width,height)
 //铺底色
 ctx.fillStyle = "#fff";
 ctx.fillRect(0, 0, canvas.width, canvas.height);
 ctx.drawImage(imgImage, 0, 0, width, height);
 
 
 gif.addFrame(canvas,{copy:true,delay:50});
 j++;
 //图片
 if(j>=len) {
 gif.render()
 };
 }
}
gif.on('finished', function(blob) {
 //生成图片链接
  var url = URL.createObjectURL(blob);
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Javascript学习笔记9 prototype封装继承
Jan 11 Javascript
基于jQuery的淡入淡出可自动切换的幻灯插件
Aug 24 Javascript
判断浏览器的内核及版本号方法汇总
Jan 05 Javascript
JavaScript实现图片DIV竖向滑动的方法
Apr 25 Javascript
项目实践一图片上传之form表单还是base64前端图片压缩(前端图片压缩)
Jul 28 Javascript
DataTables+BootStrap组合使用Ajax来获取数据并且动态加载dom的方法(排序,过滤,分页等)
Nov 09 Javascript
Vue.js组件通信的几种姿势
Oct 23 Javascript
React性能优化系列之减少props改变的实现方法
Jan 17 Javascript
vue.js实现简单的计算器功能
Feb 22 Javascript
Vue2.4+新增属性.sync、$attrs、$listeners的具体使用
Mar 08 Javascript
JavaScript 接口原理与用法实例详解
May 12 Javascript
Vue实现input宽度随文字长度自适应操作
Jul 29 Javascript
js实现掷骰子小游戏
Oct 24 #Javascript
Element-Ui组件 NavMenu 导航菜单的具体使用
Oct 24 #Javascript
js实现GIF动图分解成多帧图片上传
Oct 24 #Javascript
js实现简单掷骰子效果
Oct 24 #Javascript
使用jQuery实现掷骰子游戏
Oct 24 #jQuery
jquery实现掷骰子小游戏
Oct 24 #jQuery
JS控制GIF图片的停止与显示
Oct 24 #Javascript
You might like
WAR3重制版DOTA 5V5初体验
2020/04/09 DOTA
破解.net程序(dll文件)编译和反编译方法
2013/01/31 PHP
php校验公钥是否可用的实例方法
2019/09/17 PHP
弹出广告特效(一个IP只弹出一次)的代码
2007/07/27 Javascript
javascript 模拟JQuery的Ready方法实现并出现的问题
2009/12/06 Javascript
JQERY limittext 插件0.2版(长内容限制显示)
2010/08/27 Javascript
js前台分页显示后端JAVA数据响应
2013/03/18 Javascript
Js实现当前点击a标签变色突出显示其他a标签回复原色
2013/11/27 Javascript
javascript实现的登陆遮罩效果汇总
2015/11/09 Javascript
Jquery Mobile 自定义按钮图标
2015/11/18 Javascript
在IE8上JS实现combobox支持拼音检索功能
2016/05/23 Javascript
AngularJS基础 ng-hide 指令用法及示例代码
2016/08/01 Javascript
谈谈第三方App接入微信登录 解读
2016/12/27 Javascript
jQuery基本选择器和层次选择器学习使用
2017/02/27 Javascript
Node.js使用NodeMailer发送邮件实例代码
2017/03/06 Javascript
详解Angular CLI + Electron 开发环境搭建
2017/07/20 Javascript
解决vue打包项目后刷新404的问题
2018/03/06 Javascript
Layui实现带查询条件的分页
2019/07/27 Javascript
js实现上传图片并显示图片名称
2019/12/18 Javascript
JavaScript获取时区实现过程解析
2020/09/24 Javascript
[06:42]DOTA2每周TOP10 精彩击杀集锦vol.1
2014/06/25 DOTA
[00:36]我的中国心——Serenity vs Fnatic
2018/08/21 DOTA
Python线程中对join方法的运用的教程
2015/04/09 Python
python图像处理之反色实现方法
2015/05/30 Python
Python迭代器与生成器基本用法分析
2018/07/26 Python
利用python GDAL库读写geotiff格式的遥感影像方法
2018/11/29 Python
解决Python3用PIL的ImageFont输出中文乱码的问题
2019/08/22 Python
 Alo Yoga官网:购买瑜伽服装
2018/06/17 全球购物
建龙钢铁面试总结
2014/04/15 面试题
音乐学个人的自荐书范文
2013/11/26 职场文书
党的群众路线教育实践活动宣传方案
2014/02/23 职场文书
企业厂务公开实施方案
2014/03/26 职场文书
市场营销专业应届生自荐信
2014/06/19 职场文书
《我爱祖国》演讲稿1000字
2014/09/26 职场文书
弘扬焦裕禄精神践行三严三实心得体会
2014/10/13 职场文书
大学生学习十八届五中全会精神心得体会
2016/01/05 职场文书