JavaScript前端实现GIF图片循环播放
作者：MINO吖
使用 img 加载 GIF 图片,内容只会播放一次,之后就会自动暂停,所以这篇文章为大家介绍了如何使用JavaScript实现GIF图片循环播放吧
前言
使用 img 加载 GIF 图片，内容只会播放一次，之后就会自动暂停；
通过定时器在一段时间后重新加载图片的方式，会导致浏览器内存不断增大，并且可能会有闪烁、卡顿的问题；
ImageDecoder
WebCodecs API 的 ImageDecoder 接口提供了一种对编码图像数据进行解包和解码的方法。
ImageDecoder 只能在 localhost 或者 https 的 tab 页中获取到
代码
1.canvas 设置 width 和 height，和 GIF 图片尺寸一致
<canvas width="1310" height="954"></canvas>
或许你也可以通过一下方法动态设置尺寸；
const img = new Image();
img.src = '图片路径';
img.onload = function() {
var width = this.width; // 图片宽度
var height = this.height; // 图片高度
console.log(`图片尺寸为：${width} x ${height}`);
// some code...
// 为canvas 设置 width、height
};
2.通过 fetch 获取 GIF 图片资源，传入 url
fetch(url).then((response) => decodeImage(response.body));
3.decodeImage 方法对图片解码
imageDecoder = new ImageDecoder({ data: imageByteStream, type: "image/gif" });
imageDecoder.decode({ frameIndex: imageIndex }).then(renderImage);
4.renderImage 渲染每一帧的图片
function renderImage (result) {
const canvas = document.querySelector("canvas");
const canvasContext = canvas.getContext("2d");
// 绘制图片
canvasContext.drawImage(result.image, 0, 0);
const track = imageDecoder.tracks.selectedTrack;
if (imageDecoder.complete) {
if (track.frameCount === 1) return;
// 如果序号超出了帧数，重置为 0
if (imageIndex + 1 >= track.frameCount) imageIndex = 0;
}
// 解码下一帧图片并渲染
imageDecoder
.decode({ frameIndex: ++imageIndex })
.then((nextResult) =>
setTimeout(() => {
renderImage(nextResult);
}, result.image.duration / 1000) // 可以调整播放速度
)
.catch((e) => {
if (e instanceof RangeError) {
imageIndex = 0;
imageDecoder.decode({ frameIndex: imageIndex }).then(renderImage);
} else {
throw e;
}
});
}
完整代码
<template>
<div>
<canvas width="1310" height="954"></canvas>
</div>
</template>
<script>
export default {
mounted() {
this.play(require("@/assets/images/animate.gif"));
},
play(url) {
let imageDecoder = null;
let imageIndex = 0;
function renderImage (result) {
const canvas = document.querySelector("canvas");
const canvasContext = canvas.getContext("2d");
canvasContext.drawImage(result.image, 0, 0);
const track = imageDecoder.tracks.selectedTrack;
if (imageDecoder.complete) {
if (track.frameCount === 1) return;
if (imageIndex + 1 >= track.frameCount) imageIndex = 0;
}
imageDecoder
.decode({ frameIndex: ++imageIndex })
.then((nextResult) =>
setTimeout(() => {
renderImage(nextResult);
}, result.image.duration / 1000)
)
.catch((e) => {
if (e instanceof RangeError) {
imageIndex = 0;
imageDecoder.decode({ frameIndex: imageIndex }).then(renderImage);
} else {
throw e;
}
});
}
function decodeImage (imageByteStream) {
imageDecoder = new ImageDecoder({ data: imageByteStream, type: "image/gif" });
imageDecoder.decode({ frameIndex: imageIndex }).then(renderImage);
}
fetch(url).then((response) => decodeImage(response.body));
}
}
</script>
到此这篇关于JavaScript前端实现GIF图片循环播放的文章就介绍到这了,更多相关JavaScript GIF图片循环播放内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！