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_url
      img.onload = function () {
        cxt.drawImage(img, 0, 0, 500, 282)
      }
    }
  }
}
</script>

<style>
</style>

实现效果

老规矩上实现效果，但是由于csdn无法上传视频，因此我将效果视频发布在腾讯视频上了，点击下面链接即可跳转观看：
Vue利用Canvas实现逐帧播放图片不闪烁

以上就是《Vue利用Canvas实现逐帧播放图片不闪烁》的全部内容了。