使用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 相关文章推荐
jQuery图片播放8款精美插件分享
Feb 17 Javascript
js计算两个时间之间天数差的实例代码
Nov 19 Javascript
javascript中使用正则表达式清理table样式的代码
Apr 01 Javascript
小白谈谈对JS原型链的理解
May 03 Javascript
js数组的五种迭代方法及两种归并方法(推荐)
Jun 14 Javascript
javascript加减乘除的简单实例
Jul 12 Javascript
jQuery设计思想
Mar 07 Javascript
JS中type=&quot;button&quot;和type=&quot;submit&quot;的区别
Jul 04 Javascript
d3.js实现图形拖拽
Dec 19 Javascript
小程序websocket心跳库(websocket-heartbeat-miniprogram)
Feb 23 Javascript
js实现浏览器打印功能的示例代码
Jul 15 Javascript
jQuery实现日历效果
Sep 11 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
PHP4与PHP3中一个不兼容问题的解决方法
2006/10/09 PHP
PHP中mb_convert_encoding与iconv函数的深入解析
2013/06/21 PHP
php结合ajax实现赞、顶、踩功能实例
2014/05/12 PHP
php中smarty模板条件判断用法实例
2015/06/11 PHP
thinkphp框架表单数组实现图片批量上传功能示例
2020/04/04 PHP
PhpStorm2020 + phpstudyV8 +XDebug的教程详解
2020/09/17 PHP
javascript 禁止复制网页
2009/06/11 Javascript
JavaScript高级程序设计 阅读笔记(七) ECMAScript中的语句
2012/02/27 Javascript
封装好的js判断操作系统与浏览器代码分享
2015/01/09 Javascript
基于jQuery实现带动画效果超炫酷的弹出对话框(附源码下载)
2016/02/22 Javascript
Angular外部使用js调用Angular控制器中的函数方法或变量用法示例
2016/08/05 Javascript
不使用script导入js文件的几种方法
2016/10/27 Javascript
AngularJS入门教程之路由机制ngRoute实例分析
2016/12/13 Javascript
jQuery选择器实例应用
2017/01/05 Javascript
Bootstrap 模态框(Modal)带参数传值实例
2017/08/20 Javascript
详解node child_process模块学习笔记
2018/01/24 Javascript
百度地图去掉marker覆盖物或者去掉maker的label文字方法
2018/01/26 Javascript
浅谈Node 调试工具入门教程
2018/03/20 Javascript
vue下拉列表功能实例代码
2018/04/08 Javascript
JavaScript中常用的简洁高级技巧总结
2019/03/10 Javascript
微信小程序图片左右摆动效果详解
2019/07/13 Javascript
JS+HTML5本地存储Localstorage实现注册登录及验证功能示例
2020/02/10 Javascript
[03:21]【TI9纪实】Old Boys
2019/08/23 DOTA
python共享引用(多个变量引用)示例代码
2013/12/04 Python
零基础写python爬虫之使用urllib2组件抓取网页内容
2014/11/04 Python
Python使用matplotlib绘制动画的方法
2015/05/20 Python
Django中cookie的基本使用方法示例
2018/02/03 Python
DataFrame 将某列数据转为数组的方法
2018/04/13 Python
Python 使用生成器代替线程的方法
2020/08/04 Python
Myprotein西班牙官网:欧洲第一大运动营养品牌
2020/02/24 全球购物
保险专业大学生职业规划书
2014/03/03 职场文书
房地产项目建议书
2014/03/12 职场文书
人资专员岗位职责
2014/04/04 职场文书
警察群众路线整改措施
2014/09/26 职场文书
法人身份证明书
2014/10/08 职场文书
python tkinter Entry控件的焦点移动操作
2021/05/22 Python