手机资讯网站源码,建设企业网站管理的重要性,全网营销策划公司,江西建设银行招聘网站前言
使用 img 加载 GIF 图片#xff0c;内容只会播放一次#xff0c;之后就会自动暂停#xff1b; 通过定时器在一段时间后重新加载图片的方式#xff0c;会导致浏览器内存不断增大#xff0c;并且可能会有闪烁、卡顿的问题#xff1b; ImageDecoder
WebCodecs API 的…前言
使用 img 加载 GIF 图片内容只会播放一次之后就会自动暂停 通过定时器在一段时间后重新加载图片的方式会导致浏览器内存不断增大并且可能会有闪烁、卡顿的问题 ImageDecoder
WebCodecs API 的 ImageDecoder 接口提供了一种对编码图像数据进行解包和解码的方法。 ImageDecoder 只能在 localhost 或者 https 的 tab 页中获取到 代码
canvas 设置 width 和 height和 GIF 图片尺寸一致canvas width1310 height954/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
};通过 fetch 获取 GIF 图片资源传入 urlfetch(url).then((response) decodeImage(response.body));decodeImage 方法对图片解码imageDecoder new ImageDecoder({ data: imageByteStream, type: image/gif });
imageDecoder.decode({ frameIndex: imageIndex }).then(renderImage);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;// 如果序号超出了帧数重置为 0if (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;}});}完整代码
templatedivcanvas width1310 height954/canvas/div
/templatescript
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相关链接
纯前端如何实现Gif暂停、倍速播放MDN ImageDecoder
