失眠网 > Vue利用Canvas实现逐帧播放图片不闪烁(Vue解决逐帧播放图片闪烁问题)

Vue利用Canvas实现逐帧播放图片不闪烁(Vue解决逐帧播放图片闪烁问题)

时间：2024-07-29 01:52:16

Vue利用Canvas实现逐帧播放图片不闪烁

前言Vue代码实现实现效果

前言

Vue采用<el-image :src="src"></el-image>，通过动态改变图片地址来实现逐帧播放图片会引起严重的闪烁问题。原因是因为采用这种方式每次在切换图片时它都会先销毁上一张图片，从而暴露出背景颜色，再加载新的图片，因此产生严重的闪烁问题。要想解决此问题可以利用Canvas将图片绘制在画布上，当加载新图片时不去销毁上一张图片，这样就能解决逐帧播放图片闪烁的问题了。

接下来先展示下我们一会逐帧播放的图片吧

Vue代码实现

<template><div class="test" style="width:100%;height:600px;"><div id="button" style="width:90%;margin-left:5%;"><el-switch style="margin-top:7%" v-model="value1" inactive-text="下课" active-text="上课"> </el-switch></div><div style="width:90%;height:282px;float:left;margin-left:5%;margin-top:1%;"><canvas id="can" width="500px" height="282px" style="background-color: #CCCCCC"></canvas></div></div></template><script>export default {name: 'test',data () {return {value1: false,frame_url: require('../assets/Home/00000.jpg')}},mounted: function () {this.drawfame()},watch: {// 监听开关的值是否改变value1 (value, oldvalue) {let _this = this// 计数器let jishu = 0// 图片编号let jishus = ''if (value === true) {_this.timer = setInterval(function () {// 将计数器号转换为图片编号if (jishu < 10) {jishus = (jishu < 10 ? '0000' + jishu : jishu)} else if (jishu >= 10 & jishu < 100) {jishus = ((jishu >= 10) & (jishu < 100) ? '000' + jishu : jishu)} else {jishus = (jishu >= 100 ? '00' + jishu : jishu)}// 构建下一张图片地址_this.frame_url = require('../assets/Home/' + jishus + '.jpg')jishu = jishu + 1// 重新绘制_this.drawfame()}, 1000)} else {window.clearInterval(_this.timer)}}},methods: {drawfame () {// 在Canvas画布添加图片// var img = document.getElementById('fames')var can = document.getElementById('can')var cxt = can.getContext('2d')var img = new Image()img.src = this.frame_urlimg.onload = function () {cxt.drawImage(img, 0, 0, 500, 282)}}}}</script><style></style>