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 相关文章推荐
利用js实现遮罩以及弹出可移动登录窗口
Jul 08 Javascript
用IE重起计算机或者关机的示例代码
Mar 10 Javascript
node.js中的path.join方法使用说明
Dec 08 Javascript
JavaScript中消除闭包的一般方法介绍
Mar 16 Javascript
简介JavaScript中的getUTCFullYear()方法的使用
Jun 10 Javascript
jQuery-1.9.1源码分析系列(十)事件系统之事件体系结构
Nov 19 Javascript
Bootstrap编写一个兼容主流浏览器的受众巨幕式风格页面
Jul 01 Javascript
js控住DOM实现发布微博效果
Aug 30 Javascript
AngularJS 前台分页实现的示例代码
Jun 07 Javascript
vue项目webpack中Npm传递参数配置不同域名接口
Jun 15 Javascript
JQuery特殊效果和链式调用操作示例
May 13 jQuery
Node登录权限验证token验证实现的方法示例
May 25 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
PHP代码优化的53个细节
2014/03/03 PHP
PHP创建多级目录的两种方法
2016/10/28 PHP
js GridView 实现自动计算操作代码
2009/03/25 Javascript
简单实用的js调试logger组件实现代码
2010/11/20 Javascript
基于jQuery的图片剪切插件
2011/08/03 Javascript
jQuery简单图表peity.js使用示例
2014/05/02 Javascript
jQuery入门介绍之基础知识
2015/01/13 Javascript
jquery层级选择器的实现(匹配后代元素div)
2016/09/05 Javascript
JavaScript 链式结构序列化详解
2016/09/30 Javascript
JavaScript面试题(指针、帽子和女朋友)
2016/11/23 Javascript
bootstrap 模态框(modal)实现水平垂直居中显示
2017/01/23 Javascript
js实现5秒倒计时重新发送短信功能
2017/02/05 Javascript
js时间戳格式化成日期格式的多种方法介绍
2017/02/16 Javascript
js实现带简单弹性运动的导航条
2017/02/22 Javascript
解决vue项目本地启动时无法携带cookie的问题
2021/02/06 Vue.js
Python类和对象的定义与实际应用案例分析
2018/12/27 Python
使用PyInstaller将Pygame库编写的小游戏程序打包为exe文件及出现问题解决方法
2019/09/06 Python
python 实现让字典的value 成为列表
2019/12/16 Python
keras tensorflow 实现在python下多进程运行
2020/02/06 Python
python自动下载图片的方法示例
2020/03/25 Python
python实现图像高斯金字塔的示例代码
2020/12/11 Python
CSS3中Animation属性的使用详解
2015/08/06 HTML / CSS
数控技术专科生自我评价
2014/01/08 职场文书
村官工作鉴定评语
2014/01/27 职场文书
社区国庆节活动方案
2014/02/05 职场文书
中式结婚主持词
2014/03/14 职场文书
党员公开承诺事项
2014/03/25 职场文书
商务英语专业毕业生求职信
2014/07/06 职场文书
关于运动会广播稿300字
2014/10/05 职场文书
财务出纳岗位职责
2015/03/31 职场文书
2015年环卫处个人工作总结
2015/07/27 职场文书
2016大学生诚信考试承诺书
2016/03/25 职场文书
80后创业总结的9条职场用人思想,记得收藏
2019/08/13 职场文书
彻底理解golang中什么是nil
2021/04/29 Golang
CSS 制作波浪效果的思路
2021/05/18 HTML / CSS
零基础学java之循环语句的使用
2022/04/10 Java/Android