jQuery给GIF动画添加缩略图,不止用在WordPress

牛逼的jQuery 2 周前 回复

, , , ,

jQuery让GIF图片默认为静态图片,鼠标经过时显示动态,不仅仅在WordPress,基本所有网页上GIF图片默认是显示动态的,这样如果多了,就会让网页很卡,也会消耗资源的,所以我研究了一下怎么让GIF像视频一样,显示个缩略图,等鼠标经过或者点击播放的时候播放动态图片。

首先我们来屡一下思路:
1、假设GIF图片像视频一样都是由帧组成的,我们获取其中一帧来做缩略图,嗯,在CSS3时代我们可以用canvas画出来;
2、这个时候就得由两个图片来切换了,一个是缩略图,一个是原始图片,当鼠标经过时自动播放GIF图片;

有了这个思路,我们来编写对应的函数:

一、默认html中架构:

<img src="https://hilau.com/wp-content/uploads/2019/09/canvas.gif" class="gif" />

二、用canvas画出其中一帧来做缩略图:

    // 动态图片转静态
    function aniToReview(e){
        $(e).each(function () {
            var canvas = document.createElement('canvas'),
                ctx = canvas.getContext("2d"),
                base64 = '',
                aniUrl = this.src;
		//canvas.setAttribute('crossOrigin', 'anonymous');
            $(this).one('load', function () {
                canvas.width = this.width;
                canvas.height = this.height;
                ctx.drawImage(this, 0, 0, canvas.width, canvas.height);
                base64 = canvas.toDataURL("image/png");
                var reviewUrl = URL.createObjectURL(base64)
                $(this).attr({
                    'src': reviewUrl,
                    'realsrc': aniUrl
                });
            });
        })
    }
    aniToReview('.gif');

这里如果不能将现在的图片的地址转换成静态地址,显示toDataURL转换不了,在服务器上试试,有时候本地会出现这样的问题;

三、当鼠标经过时动态与静态之间的变化

    // 鼠标经过时静态图片转动态
    $(document).on('mouseover','.gif',function () {
        var reviewImg = $(this).attr('src'),
            aniImg = $(this).attr('realsrc');
        $(this).attr({'src': aniImg, 'realsrc': reviewImg});
    })
    $(document).on('mouseout','.gif',function () {
        var reviewImg = $(this).attr('realsrc'),
            aniImg = $(this).attr('src');
        $(this).attr({'src': reviewImg, 'realsrc': aniImg});
    })

四、上述代码是针对一张图片处理是可以的

譬如在WordPress,我们每篇文章都有GIF图片,或者我首页缩略图全部是GIF图片,我不可能一个个都加上class=gif,当然不嫌麻烦也是可以的。所以我们判断一下,当有gif图片的时候才会触发上述的效果:

	//判断图片是否是GIF图片
	function isAssetTypeAnImage(ext) {
	  return ['gif'].indexOf(ext.toLowerCase()) !== -1;
	}
	//如果是GIF图片,添加div以及class="gif"
	$('img').each(function(){
		var gifPath = $(this)[0].src;
		var	gifIndex = gifPath.lastIndexOf(".");
		var	gifExt = gifPath.substr(gifIndex+1);
			if (isAssetTypeAnImage(gifExt)) {
				$(this).wrap("<div class='gifWrap'></div>").parent();
				$(this).after('<ins class="play-gif">gif</ins>');
				$(this).addClass('gif');
			}
	}); 

五、总结一下

当网页有img标签的时候,我们首先判断其是不是GIF图片,如果是,触发我们动态变静态函数,并且鼠标经过会在动态与静态切换。所以这个JQ小插件就出来了(可以保存为gifpreview.js,然后在网页中引入,当然这个必须基于jquery库):

	//判断图片是否是GIF图片
	function isAssetTypeAnImage(ext) {
	  return ['gif'].indexOf(ext.toLowerCase()) !== -1;
	}
	//如果是GIF图片,添加div以及class="gif"
	$('img').each(function(){
		var gifPath = $(this)[0].src;
		var	gifIndex = gifPath.lastIndexOf(".");
		var	gifExt = gifPath.substr(gifIndex+1);
			if (isAssetTypeAnImage(gifExt)) {
				$(this).wrap("<div class='gifWrap'></div>").parent();
				$(this).after('<ins class="play-gif">gif</ins>');
				$(this).addClass('gif');
			}
	}); 
	
	//dataURLtoBlob("a.gif");
    // base64 转 blob
    function dataURLtoBlob(dataurl) {
        var arr = dataurl.split(','),
            mime = arr[0].match(/:(.*?);/)[1],
            bstr = atob(arr[1]),
            n = bstr.length,
            u8arr = new Uint8Array(n);
        while (n--) {
            u8arr[n] = bstr.charCodeAt(n);
        }
        return new Blob([u8arr], {
            type: mime
        });
    }

    // 动态图片转静态
    function aniToReview(e){
        $(e).each(function () {
            var canvas = document.createElement('canvas'),
                ctx = canvas.getContext("2d"),
                base64 = '',
                aniUrl = this.src;
				canvas.setAttribute('crossOrigin', 'anonymous');
            $(this).one('load', function () {
                canvas.width = this.width;
                canvas.height = this.height;
                ctx.drawImage(this, 0, 0, canvas.width, canvas.height);
                base64 = canvas.toDataURL("image/png");
                var reviewUrl = URL.createObjectURL(dataURLtoBlob(base64))
                $(this).attr({
                    'src': reviewUrl,
                    'realsrc': aniUrl
                });
            });
        })
    }
	aniToReview('.gif');
    // 鼠标经过时静态图片转动态
    $(document).on('mouseover','.gif',function () {
        var reviewImg = $(this).attr('src'),
            aniImg = $(this).attr('realsrc');
        $(this).attr({'src': aniImg, 'realsrc': reviewImg});
		$('.play-gif').fadeOut(100);
    })
    $(document).on('mouseout','.gif',function () {
        var reviewImg = $(this).attr('realsrc'),
            aniImg = $(this).attr('src');
        $(this).attr({'src': reviewImg, 'realsrc': aniImg});
		$('.play-gif').fadeIn(100);
    })

最后,补充下对应css样式:

	ins.play-gif{
		box-sizing:border-box;
		position:absolute;
		top:50%;
		margin-top:-20px;
		left:50%;
		margin-left:-20px;
		min-height:40px;
		min-width:40px;
		text-align:center;
		background:#222;
		line-height:34px;
		font-size:14px;
		text-transform:uppercase;
		color:#fff;
		border-radius:50%;
		opacity:.9;
		border:3px solid #fff;
		cursor:pointer;
		text-decoration:none;
	}
	ins.play-gif:hover{
		opacity:.5;
	}
	.gifWrap{
		position:relative;
		display:inline-block;
	}

大功告成!如果需要的可以自己试试,然后演示可以见本站效果!

支付宝打赏微信打赏

如果此文对你有帮助,欢迎打赏作者。

发表评论

欢迎回来 (打开)

(必填)

5864