CSS或JS完毕gif动态图片的终止与播音,使用JS和canvas达成gif动图的小憩和播放代码

HTML伍canvas能够读取图片信息,绘制当前图片。于是能够达成图片埃德蒙顿克,模糊,色值过滤等重重图纸特效。大家这边并非那么复杂,只要读取大家的图样,重绘下就足以。

选用JS和canvas完结gif动图的告1段落和广播代码,jscanvas

HTML5canvas能够读取图片音讯,绘制当前图片。于是能够完成图片德雷斯顿克,模糊,色值过滤等诸多图纸特效。我们这里并非那么复杂,只要读取大家的图片,重绘下就能够。

图片 1

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没搞头。

二.
不得不甘休gif,不能够确实含义的间歇。因为canvas得到的gif图片新闻为第3帧的音信,后边的貌似获取不到。要想落成暂停,而不是结束,还必要更为商量,倘令你有法子,非常应接分享。

以上正是本文的全体内容,希望对大家的学习抱有补助,也指望大家多多援助帮客之家。

HTML5canvas能够读取图片音讯,绘制当前图片。于是能够兑现图片马赛克,模糊,色值过…

CSS或JS达成gif动态图表的休憩与播音

2015/12/06 · CSS,
JavaScript ·
gif

原来的书文出处:
张鑫旭   

一、屋外:寒风吹,雪花飘;屋内:空调吹,代码飘

清晨出来买菜,正好降水了,还夹杂着冰珠子。鄙人民代表大会体,穿的是1件秀气但单薄的紫墨雪青大衣,立马冻成了中华田园犬。原来安顿去钓鱼的,科科,作罢,早上在家看中央电视台5克利夫兰骑士vs新奥尔良鹈鹕,中午补动漫码代码做小说,好生惬意。

图片 2

对此习于旧贯性刷微博的本人,总时不常会面到类似上边包车型地铁娱乐:

测测你和小白(白百何(英文名:Bai Baihe))有啥样共同点,戳开动图,起始看清的词是何许?ie浏览器的同校能够按esc键(或截屏),听说在哪些词暂停,哪个词就是你啊!图片 3

图片 4

OK,
这里出现1个浏览器性情,就是经过ESC火速键,暂停gif的广播。听他们说FireFox浏览器从前也许有,后来被干掉了,依照@紫云妃的布道是:

是那样的,Firefox原本的表现是:在页面load事件做到,同一时候x开关造成刷新开关之后,esc照旧有几个职能,中断当前正值发送的ajax,websocket,结束gif,apng动画的播放.但这么些作用太小众了,影响了普通用户的运用,可能比异常的大心按了esc,结果ajax断了,网页出错了.所以Firefox20修改成:网页加载成功后,esc键完全失效.

不过,这种隐晦的但就像会潜移默化健康作用的小本领分明是力不从心兑现真正含义上的gif动态图表的休息与播音的。1是兼容性,贰是成效性,3是移动端未有ESC键。

因而,假使大家相遇须求能够随地随时结束gif动态图表播放的急需的时候,就需求寻觅此外的出路。好,严冬里的暖身截止,先导进入正题~~

图片 5

贰、gif图片自身可控前提下的格局壹:多img财富支配管理

如若说,大家希望暂停的gif是本身(开辟人士)传上去的,不是用户能够自便上传不可控的gif.
大家能够如此管理,就是打算二套图形,四个是gif动态图表,还应该有叁个是唯有一帧的稳步的图片。然后采纳JS来回切换`的src`值为那两张图片地址就好了。

此办法吗简单,作者就不放实例了。

img.src=”animate.gif”; // 只怕表现的是 img.src=”static.png”;

1
2
3
img.src="animate.gif";
// 或者呈现的是
img.src="static.png";

这几个主意最大的优点正是包容性强,全数浏览器都得以完成结束效果。但是,这种办法有个局限,就是,暂停时候展现的图纸恒久是1律张。基本上能够说是截止,而不是暂停。

那有未有啥点子能够真正含义上的间歇呢?还真有!

HTML代码:

三、gif图片自个儿可控前提下的主意2:CSS3 animation调整

也正是我们看看的gif效果并不是2个真正的gif图片,而是利用CSS三的animation属性调控产生的逐帧动态图片效果。我搜了下,@DO1路人乙有篇文章“css叁-animation制作逐帧动画”特意介绍了这种本事。说穿了就算animation调整Pepsi-Colas图片的background-position值模拟gif效果。

诸如,新版twitter的Like的作用,貌似就有选拔该技术:
图片 6

使用CSS三animation实现类gif效果的功利在于,图片能够无损,且大家能够很自在地决定图片动画的制动踏板和播发,使用的是:animation-play-state: paused;本条宣称。

你能够狠狠地方击这里:利用CSS3animation完结gif动图的中断和广播demo

点击demo页面包车型大巴中断开关,您会意识,直接就停住了,如下截图暗中提示,截自IE十浏览器:
图片 7

再度点击,就能够在暂停画面之后持续播放了。从而完毕了大家对动画图片的可信赖调节功效。

此情势看起来完美,但是,一. IE10+等支撑CSS叁 animation的浏览器才行;2.
最大的难点是图表需若是友好调控,假设想调整用户上传的真的含义的gif图片,只可以……高不可攀……………………吗?

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

四、自个儿没办法调控的gif图片的停下与广播

比如说,页面上用户上传了些gif图片,哎哎,闪瞎了自己的中国田园眼,笔者要一清二楚脚刹踏板,怎么办?如若后台同学未有对gif举办静态管理,此时,只可以靠前端小友人,有哪些艺术吗?

有三个。HTML5canvas能够读取图片消息,绘制当前图片。于是能够兑现图片埃德蒙顿克,模糊,色值过滤等大多图纸特效。我们这里并非那么复杂,只要读取大家的图形,重绘下就足以。

你能够狠狠地方击这里:利用JS和canvas完毕gif动图的结束和广播demo

点击按键,然后:
图片 8

图片 9

怎么着运用?
自个儿对HTMLImageElement原型实行了扩充,增添了stop()play()三个主意,如下:

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(‘二d’).drawImage(this, 0, 0, width, height); //
重新载入参数当前图片 try { this.src = canvas.toDataU揽胜极光L(“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; } }
}; }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
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;
            }
        }
    };
}

我们只要在页面中和煦的JS文件中复制上边的代码,然后就足以直接:

var image = document.getElementsByTagName(“img”)[0]; // 停止gif图片
image.stop(); // 播放gif图片 image.play();

1
2
3
4
5
var image = document.getElementsByTagName("img")[0];
// 停止gif图片
image.stop();
// 播放gif图片
image.play();

//zxx:
上面代码并未有详细测试,以及只怕的感受难题(IE闪动)未有实际管理(影响原理暗意),若要实际行使,需求和煦再微调完美下。

不足

  1. IE9+支持。IE7/IE8不支持canvas没搞头。
    二.
    只能截止gif,无法真正含义的暂停。因为canvas获得的gif图片音信为第二帧的音讯,前边的相似获取不到。要想达成暂停,而不是甘休,还索要尤其商讨,假如你有办法,极其招待分享。

JS代码:

五、结束语

是胡不是霍,是霍躲但是!哈哈!
图片 10
上边这几个gif也是demo暗意gif强力候选。后来一讨论,看笔者作品的依然丑挫穷多,宅女少,所以,你懂的……
图片 11

——小编是多年不见的低调的分隔线—–

正文gif相比较多,倘使你是运动器具查看本文,会意识,怎么小编的电池组怎么更加的瘦了!不是因为天冷冻小了,而是gif相比较功耗。所以,从这几个角度讲,大家实在有不能缺少在运动端暗中认可甘休这一个gif的播报,用户点击再播放。1来省流量,二来省电。

譬如未有静态图片财富支撑,那不要紧尝试小说出现的有的措施,有心得记得来这里申报哈!
图片 12

提起底,本文的主意都以有缺点的,自身也一直不在实际上项目中动用过。由此,倘使阅读本文的你:

  1. 有更周详的gif暂停与广播方式;
  2. 意识文中方法有欠缺和疏漏;

都突出愿意得以不吝赐教!

多谢阅读!周末风和日暄!

 

1 赞 6 收藏
评论

图片 13

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没搞头。

二.
只好甘休gif,不能够真的含义的中止。因为canvas获得的gif图片音信为第二帧的音信,后边的貌似获取不到。要想完成暂停,而不是截止,还亟需越发切磋,尽管你有措施,特别接待分享。

以上就是本文的全体内容,希望对大家的求学抱有帮助,也指望大家多多协理脚本之家。

相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注

*
*
Website