使用JS和canvas实现gif动图的停止和播放代码


Posted in Javascript onSeptember 01, 2017

HTML5 canvas可以读取图片信息,绘制当前图片。于是可以实现图片马赛克,模糊,色值过滤等很多图片特效。我们这里不用那么复杂,只要读取我们的图片,重绘下就可以。

使用JS和canvas实现gif动图的停止和播放代码

HTML代码:

<img id="testImg" src="xxx.gif" width="224" height="126">
<p><input type="button" id="testBtn" value="停止"></p>

JS代码:

if ('getContext' in document.createElement('canvas')) {
 HTMLImageElement.prototype.play = function() {
  if (this.storeCanvas) {
   // 移除存储的canvas
   this.storeCanvas.parentElement.removeChild(this.storeCanvas);
   this.storeCanvas = null;
   // 透明度还原
   image.style.opacity = '';
  }
  if (this.storeUrl) {
   this.src = this.storeUrl; 
  }
 };
 HTMLImageElement.prototype.stop = function() {
  var canvas = document.createElement('canvas');
  // 尺寸
  var width = this.width, height = this.height;
  if (width && height) {
   // 存储之前的地址
   if (!this.storeUrl) {
    this.storeUrl = this.src;
   }
   // canvas大小
   canvas.width = width;
   canvas.height = height;
   // 绘制图片帧(第一帧)
   canvas.getContext('2d').drawImage(this, 0, 0, width, height);
   // 重置当前图片
   try {
    this.src = canvas.toDataURL("image/gif");
   } catch(e) {
    // 跨域
    this.removeAttribute('src');
    // 载入canvas元素
    canvas.style.position = 'absolute';
    // 前面插入图片
    this.parentElement.insertBefore(canvas, this);
    // 隐藏原图
    this.style.opacity = '0';
    // 存储canvas
    this.storeCanvas = canvas;
   }
  }
 };
}
 
var image = document.getElementById("testImg"), 
 button = document.getElementById("testBtn");
 
if (image && button) {
 button.onclick = function() {
  if (this.value == '停止') {
   image.stop();
   this.value = '播放';
  } else {
   image.play();
   this.value = '停止';
  }
 };
}

上面代码并未详尽测试,以及可能的体验问题(IE闪动)没有具体处理(影响原理示意),若要实际使用,需要自己再微调完美下。

不足:

1. IE9+支持。IE7/IE8不支持canvas没搞头。

2. 只能停止gif,不能真正意义的暂停。因为canvas获得的gif图片信息为第一帧的信息,后面的貌似获取不到。要想实现暂停,而不是停止,还需要进一步研究,如果你有方法,非常欢迎分享。

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

Javascript 相关文章推荐
js对数字的格式化使用说明
Jan 12 Javascript
javascript 基础篇4 window对象,DOM
Mar 14 Javascript
javascript+xml实现简单图片轮换(只支持IE)
Dec 23 Javascript
javascript Deferred和递归次数限制实例
Oct 21 Javascript
JavaScript搜索字符串并将搜索结果返回到字符串的方法
Apr 06 Javascript
Bootstrap打造一个左侧折叠菜单的系统模板(二)
May 17 Javascript
js 获取站点应用名的简单实例
Aug 18 Javascript
Node.js制作简单聊天室
Jan 12 Javascript
JavaScript基本类型值-Number类型
Feb 24 Javascript
vue.js组件vue-waterfall-easy实现瀑布流效果
Aug 22 Javascript
Vue实现带进度条的文件拖动上传功能
Feb 23 Javascript
基于AngularJS拖拽插件ngDraggable.js实现拖拽排序功能
Apr 02 Javascript
关于Promise 异步编程的实例讲解
Sep 01 #Javascript
[js高手之路]单例模式实现模态框的示例
Sep 01 #Javascript
JQuery EasyUI 结合ztrIee的后台页面开发实例
Sep 01 #jQuery
详解使用angular的HttpClient搭配rxjs
Sep 01 #Javascript
JS中关于正则的巧妙操作
Aug 31 #Javascript
JavaScript表单即时验证 验证不成功不能提交
Aug 31 #Javascript
js实现canvas保存图片为png格式并下载到本地的方法
Aug 31 #Javascript
You might like
php jquery 实现新闻标签分类与无刷新分页
2009/12/18 PHP
PHP chmod 函数与批量修改文件目录权限
2010/05/10 PHP
PHP函数addslashes和mysql_real_escape_string的区别
2014/04/22 PHP
PHP常用技术文之文件操作和目录操作总结
2014/09/27 PHP
PHP学习笔记(二):变量详解
2015/04/17 PHP
PHP使用 Pear 进行安装和卸载包的方法详解
2019/07/08 PHP
JavaScript 学习笔记一些小技巧
2010/03/28 Javascript
js过滤数组重复元素的方法
2010/09/05 Javascript
JS正则表达式验证密码格式的集中情况总结
2017/02/23 Javascript
js实现4个方向滚动的球
2017/03/06 Javascript
JavaScript实现替换字符串中最后一个字符的方法
2017/03/07 Javascript
详解Node.js开发中的express-session
2017/05/19 Javascript
jQuery层级选择器_动力节点节点Java学院整理
2017/07/04 jQuery
Laravel整合Bootstrap 4的完整方案(推荐)
2018/01/25 Javascript
解决layui 复选框等内置控件不显示的问题
2018/08/14 Javascript
总结javascript三元运算符知识点
2018/09/28 Javascript
JS实现图片拖拽交换效果
2018/11/30 Javascript
基于vue、react实现倒计时效果
2019/08/26 Javascript
微信小程序中的video视频实现 自定义播放按钮、封面图、视频封面上文案
2020/01/02 Javascript
vue实现数据控制视图的原理解析
2020/01/07 Javascript
Python3实现的简单验证码识别功能示例
2018/05/02 Python
PyCharm代码提示忽略大小写设置方法
2018/10/28 Python
tensorflow模型继续训练 fineturn实例
2020/01/21 Python
Python获取指定网段正在使用的IP
2020/12/14 Python
印度在线内衣和时尚目的地:Zivame
2017/09/28 全球购物
GE设备配件:GE Appliance Parts(家电零件、配件和滤水器)
2018/11/28 全球购物
Crocs欧洲官网:Crocs Europe
2020/01/14 全球购物
Exception类的常用方法
2012/06/16 面试题
班长岗位职责
2013/11/10 职场文书
土木工程毕业生自荐信
2013/11/12 职场文书
法定代表人身份证明书
2014/09/10 职场文书
乡镇党的群众路线教育实践活动个人对照检查材料
2014/09/23 职场文书
年会邀请函范文
2015/01/30 职场文书
离婚起诉书范本
2015/05/18 职场文书
2015年大学生暑期实习报告
2015/07/13 职场文书
关于社会实践的心得体会(2016最新版)
2016/01/25 职场文书