使用canvas控制gif图片的播放与暂停

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.getElementsByTagName("img")[0];
// 停止gif图片
image.stop();
// 播放gif图片
image.play();
时间: 2024-11-06 07:35:47

使用canvas控制gif图片的播放与暂停的相关文章

想控制GIF图片动画播放吗?试试gifffer.js

在线演示:http://www.gbtags.com/gb/demoviewer/3578/c6bec39a-61ae-4017-8e23-e0bc1eeb740f/example|index.html.htm 大家可能都斯通见惯了互联网上普遍使用的GIF图片,但是有没有想过让用户自己尝试控制GIF动画的播放呢?在今天这篇文章中,我们将介绍一个超棒的Javascript小类库 - gifffer.js,它可以帮助你添加控制GIF动画功能,想不想尝试一下? 如何使用? 首先引用JS,如下: <sc

JS可控制的图片自动循环播放查看效果

JS可控制的图片自动循环播放查看效果 <html> <head> <title>JS可控制的图片自动循环播放查看效果丨芯晴网页特效丨CsrCode.Cn</title> </head> <body> <SCRIPT LANGUAGE="JavaScript"> <!-- Begin var rotate_delay = 5000; // delay in milliseconds (5000 =

可控制GIF动画图片播放和暂停jQuery插件

gifplayer是一款可以控制GIF动画格式图片播放和暂停的jQuery插件.该jQuery插件使用简单,文件体积小.可用于控制任何GIF动画图片的开始播放和暂停播放. 要使用该GIF动画图片jquery插件,可以分为下面的五个步骤: 在你的页面中添加一个静态版本的GIF图片,格式为PNG.jpg等图片格式都可以. 在img标签中添加data-gif属性指向GIF动画图片,或者不写也可以. 在图片文件夹中放置.gif格式的图片和它的静态版本的图片,两个图片的名称要相同. 在你的页面中引入gif

基于HTML5 Canvas实现的图片马赛克模糊特效

效果请点击下面网址: http://hovertree.com/texiao/html5/1.htm 一.开门见山受美国肖像画家Chuck Close的启发,此脚本通过使用HTML5 canvas元素把图像转换成像素形式,这基本上是一个为canvas imageData功能的简单演示. 此脚本现存于GitHub上,您可以在那里下载到脚本和示例.在GitHub上查看像素化资源 二.选项此方法接受一个对象数组,每个对象都拥有一组选项.resolution : 渲染像素间的像素距离,必须的.shape

canvas生成遮罩图片

首先我们知道css3中增加了不少好用.好玩的css3样式可以使用.今天我们要说到是遮罩. 它的使用方式也不复杂,和background使用方式差不多.使用mask-image就可以使用,这样就可以通过图片合成一张带有形状的合成图了,不需要直接使用PS处理了.CSS遮罩——如何在CSS中使用遮罩,这篇文章已经详细说明了遮罩如何使用了,我这里就不赘述了.今天我这里想要说明的是,如何通过这个完成生成一个合成图片的逻辑. 它通过两种方式:前端JS+canvas,后端nodejs+canvas,完成基本思

HTML5 Canvas实现的图片马赛克模糊特效

要想让图片像素化,首先调用如下脚本:<script type="text/javascript" src="http://hovertree.com/texiao/html5/1/js/close-pixelate.js"></script>然后调用方法closePixelate,更具体的是:图片dom.closePixelate(选项参数) 此脚本可以应用于各类图片.根据HTML5规范,浏览器禁止任何外部托管图片上使用getImageDat

用canvas给视频图片添加特效

Canvas制作视频图片特效 1. Canvas介绍 1.1Canvas是html5上的一个画布标签,功能有点类似java的swing.可以在canvas上画线条 弧线, 文字 就是画布的功能. 具体提供的js函数看http://www.w3school.com.cn/tags/html_ref_canvas.asp 2 简单介绍一下使用: Var canvas = document.documentElementById(“canvasId”); Var ctx = canvas.getCon

ios系统 竖屏拍照 canvas处理后 图片旋转(利用exif.js解决ios手机上传竖拍照片旋转90度问题)

转:https://www.cnblogs.com/lovelgx/articles/8656615.html ---恢复内容开始--- 问题:html5+canvas进行移动端手机照片上传时,发现ios手机上传竖拍照片会逆时针旋转90度,横拍照片无此问题:Android手机没这个问题. 解决方法:利用exif.js解决ios手机上传竖拍照片旋转90度问题 因此解决这个问题的思路是:获取到照片拍摄的方向角,对非横拍的ios照片进行角度旋转修正. 利用exif.js读取照片的拍摄信息,详见 htt

创建一个程序读入和显示视频文件,并可以使用滑动条控制视频文件的播放。一个滑动条用来控制视频播放位置,以10为步长跳进。另一个滑动条用来控制停止/播放

/* 创建一个程序读入和显示视频文件,并可以使用滑动条控制视频文件的播放. 一个滑动条用来控制视频播放位置,以10为步长跳进.另一个滑动条用来控制 停止/播放 */ #include <cv.h> #include <highgui.h> int g_slider_position = 0; CvCapture* g_capture = NULL; int index = 0; bool flag = true; int g_slider_position1 = 0; void o