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 相关文章推荐
jquery教程ajax请求json数据示例
Jan 13 Javascript
jquery专业的导航菜单特效代码分享
Aug 29 Javascript
javascript弹出窗口实现代码
Nov 12 Javascript
谈谈基于iframe、FormData、FileReader三种无刷新上传文件的方法
Dec 03 Javascript
20分钟轻松创建自己的Bootstrap站点
May 12 Javascript
使用jQuery制作Web页面遮罩层插件的实例教程
May 26 Javascript
如何使用Vuex+Vue.js构建单页应用
Oct 27 Javascript
js is_valid_filename验证文件名的函数
Jul 19 Javascript
Vue通过URL传参如何控制全局console.log的开关详解
Dec 07 Javascript
Angular @HostBinding()和@HostListener()用法
Mar 05 Javascript
详解Nuxt内导航栏的两种实现方式
Apr 16 Javascript
在Vue里如何把网页的数据导出到Excel的方法
Sep 30 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中转义mysql语句的实现代码
2011/06/24 PHP
php结合js实现点击超链接执行删除确认操作
2014/10/31 PHP
PHP使用pcntl_fork实现多进程下载图片的方法
2014/12/16 PHP
Laravel模板引擎Blade中section的一些标签的区别介绍
2015/02/10 PHP
隐藏Nginx或Apache以及PHP的版本号的方法
2016/01/03 PHP
PHP链表操作简单示例
2016/10/15 PHP
PHP切割汉字的常用方法实例总结
2019/04/27 PHP
php设计模式之职责链模式实例分析【星际争霸游戏案例】
2020/03/27 PHP
php7 list()、session及其他模块的修改实例分析
2020/05/25 PHP
PHP执行linux命令6个函数代码实例
2020/11/24 PHP
jquery ajax执行后台方法
2010/03/18 Javascript
远离JS灾难css灾难之 js私有函数和css选择器作为容器
2011/12/11 Javascript
根据当前时间在jsp页面上显示上午或下午
2014/08/18 Javascript
javascript元素动态创建实现方法
2015/05/13 Javascript
分分钟玩转Vue.js组件
2016/10/25 Javascript
jquery 校验中国身份证号码实例详解
2017/04/11 jQuery
各种选择框jQuery的选中方法(实例讲解)
2017/06/27 jQuery
Vue Router去掉url中默认的锚点#
2018/08/01 Javascript
Django+vue跨域问题解决的详细步骤
2019/01/20 Javascript
Vue 列表上下过渡效果的实例代码
2019/06/25 Javascript
js实现星星打分效果
2020/07/05 Javascript
js实现查询商品案例
2020/07/22 Javascript
python机器学习之决策树分类详解
2017/12/20 Python
详解python中的 is 操作符
2017/12/26 Python
python占位符输入方式实例
2019/05/27 Python
CSS改变网页中鼠标选中文字背景颜色例子
2014/04/23 HTML / CSS
瑜伽国际:Yoga International
2018/04/18 全球购物
电子商务专业个人的自我评价分享
2013/10/29 职场文书
挂牌仪式策划方案
2014/05/18 职场文书
党员干部观看《周恩来四个昼夜》思想汇报
2014/09/10 职场文书
先进个人自荐书
2015/03/06 职场文书
买卖合同纠纷代理词
2015/05/25 职场文书
联欢会开场白
2015/06/01 职场文书
公司车辆管理制度
2015/08/04 职场文书
阳光体育运动标语口号
2015/12/26 职场文书
浅谈什么是SpringBoot异常处理自动配置的原理
2021/06/21 Java/Android