使用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之小练习代码
Oct 12 Javascript
lyhucSelect基于Jquery的Select数据联动插件
Mar 29 Javascript
js实现网页标题栏闪烁提示效果实例分析
Nov 20 Javascript
AngularJS 实现按需异步加载实例代码
Oct 18 Javascript
JavaScript的代码编写格式规范指南
Dec 07 Javascript
jQuery中Ajax全局事件引用方式及各个事件(全局/局部)执行顺序
Jun 02 Javascript
Vue.js学习笔记之修饰符详解
Jul 25 Javascript
Javascript快速实现浏览器系统通知
Aug 26 Javascript
深入剖析JavaScript instanceof 运算符
Jun 14 Javascript
JS中的算法与数据结构之集合(Set)实例详解
Aug 20 Javascript
利用JS如何获取form表单数据
Dec 19 Javascript
jQuery编写QQ简易聊天框
Aug 27 jQuery
关于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
基于wordpress主题制作的具体实现步骤
2013/05/10 PHP
PHP json_encode中文乱码问题的解决办法
2013/09/09 PHP
php数组中删除元素之重新索引的方法
2014/09/16 PHP
CI框架实现框架前后端分离的方法详解
2016/12/30 PHP
Laravel 5.5 实现禁用用户注册示例
2019/10/24 PHP
30个让人兴奋的视差滚动(Parallax Scrolling)效果网站
2012/03/04 Javascript
JQuery中关于jquery.js与jquery.min.js的比较探讨
2013/05/15 Javascript
javascript中为某个元素指定事件的三种方式
2014/08/07 Javascript
JavaScript将Web页面内容导出到Word及Excel的方法
2015/02/13 Javascript
jQuery实现DIV层收缩展开的方法
2015/02/27 Javascript
Node.js静态文件服务器改进版
2016/01/10 Javascript
JavaScript实现弹出DIV层同时页面背景渐变成半透明效果
2016/03/25 Javascript
Angular 2应用的8个主要构造块有哪些
2016/10/17 Javascript
js阻止冒泡和默认事件(默认行为)详解
2016/10/20 Javascript
Vue.js实现按钮的动态绑定效果及实现代码
2017/08/21 Javascript
基于node.js实现微信支付退款功能
2017/12/19 Javascript
通过封装scroll.js 获取滚动条的值
2018/07/13 Javascript
浅谈React Native 传参的几种方式(小结)
2019/05/21 Javascript
webpack的 rquire.context用法实现工程自动化的方法
2020/02/07 Javascript
JS变量提升原理与用法实例浅析
2020/05/22 Javascript
[07:54]DOTA2 MV《我的动力鞋》 ImbaTV 出品
2014/11/21 DOTA
python基础教程之获取本机ip数据包示例
2014/02/10 Python
几个提升Python运行效率的方法之间的对比
2015/04/03 Python
python如何查看系统网络流量的信息
2016/09/12 Python
Python字符串、整数、和浮点型数相互转换实例
2018/08/04 Python
深入了解Django View(视图系统)
2019/07/23 Python
python turtle 绘制太极图的实例
2019/12/18 Python
Python实现图片识别加翻译功能
2019/12/26 Python
keras读取训练好的模型参数并把参数赋值给其它模型详解
2020/06/15 Python
HTML5等待加载动画效果
2017/07/27 HTML / CSS
移动端html5判断是否滚动到底部并且下拉加载
2019/11/19 HTML / CSS
牵手50台湾:专为黄金岁月的单身人士而设的交友网站
2021/02/18 全球购物
大学生英语演讲稿
2014/04/24 职场文书
2014大四本科生自我鉴定总结
2014/10/04 职场文书
《日月潭》教学反思
2016/02/20 职场文书
Python中使用Opencv开发停车位计数器功能
2022/04/04 Python