vue+Canvas实现图片列表逐帧播放

已于 2023-02-24 17:59:11 修改
阅读量2k 收藏 4
点赞数 1
文章标签： 前端 vue.js
于 2023-02-24 17:57:54 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Janice_97/article/details/129200714
版权

前言

页面展示

代码实现过程

完整代码

前言

需求背景：实现一组/多组图片可以进行一帧一帧播放，有点类似于视频播放，有进度条、暂停、上/下一张播放功能，且可以进行逐帧查看图片。

页面展示

 话不多说，一起来看看吧~

代码实现过程

  1. ​​​​第一步：成功获取数据列表之后，初始化canvas
  2. 第二步：在canvas上加载图片（ drawImg() ）
  3. 第三步：根据index获取图片url，调用第二步方法完成操作区按钮功能

完整代码

<template>
  <div class="videoBoxCls">
    <!-- 左侧列表 -->
    <div class="left-list">
      <div v-for="(imgList, index) in imgListAll" :key="index" class="item-cls">
        <div class="img-box" :class="[iindex == currentIdx ? 'current' : '']" @click="switchList(index)">
          <img :src="imgList.cover" alt>
        </div>
        <p class="img-title">{{ imgList.name }}</p>
      </div>
    </div>
    <!-- 右侧预览 -->
    <div class="right-con">
      <div ref="videoContainer" class="videoContainer" />
      <div class="frameBox">
        <!-- 帧进度条 -->
        <div class="frame">
          <div
            v-for="(item, index) in currentFrameList"
            :key="item.id"
            :class="['frameItem', currentFrame == item.frame ? 'currentFrane' : '']"
            @click="gon(index)"
          >
            <span class="hovFrame">{{ item.frame }}</span>
          </div>
        </div>
        <!-- 播放按钮 -->
        <div class="videoBtn">
          <span class="frame-title">Frame:{{ currentFrame }}</span>
          <div class="btn-box">
            <div class="goTopCls" @click="goFor('frist')" />
            <div class="prevCls" @click="prev" />
            <div v-if="ispause" class="play" @click="play" />
            <div v-if="!ispause" class="pause" @click="pause" />
            <div class="nextCls" @click="next" />
            <div class="goLastCls" @click="goFor('last')" />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: 'VideoDialog',
  data() {
    return {
      currentIdx: 0, // 左侧列表 当前index
      currentFrame: '', // 当前帧
      imgListAll: [{
        name: '测试',
        cover: '',
        imgArr: []
      }], // 获取左侧列表
      currentFrameList: [], // 当前播放帧列表
      // 视频预览
      canvas: null,
      ctx: null,
      timer: null, // 定时器
      infinite: 1000000000, // 循环次数
      ispause: true, // 是否是暂停状态
      plusNum: 0, // 帧总量
      plusCount: 0, // 帧总量计数器(判断循环次数)
      count: 0, // 当前帧
      fps: 25, // 25帧/秒
      loop: 'infinite', // 是否循环
      recordFrom: 0, // 记录起始帧
      recordTo: null, // 记录结束帧
      imgsLen: null // 记录帧长度
    }
  },
  watch: {
    count(newValue) {
      this.currentFrame = this.currentFrameList[newValue].frame
    }
  },
  created() {
    this.getImgAllList()
  },
  methods: {
    // 获取图片列表列表
    getImgAllList() {},
    // 左侧切换列表
    switchList(index) {
      this.currentIdx = index
      // 设置右侧封面
      this.drawImg(this.imgListAll[this.currentIdx].cover)
      this.resetData()
      this.currentFrameList = this.imgListAll[this.currentIdx].imgArr
      this.currentFrame.frame = this.currentFrameList[0].frame
      this.imgsLen = this.currentFrameList.length
    },
    // 重置数据 停止并回到第一帧或cover帧
    resetData() {
      this.ispause = true
      clearInterval(this.timer)
      this.plusNum = 0
      this.plusCount = 0

      // 重置记录
      this.recordFrom = 0
      this.recordTo = this.imgsLen - 1
      this.loop = 'infinite'
      this.infinite = 1000000000
      this.count = 0
    },
    // 初始化帧播放
    CanvasPlayFrames() {
      // 1.创建canvas
      const videoContainer = this.$refs.videoContainer
      const canvas = document.createElement('canvas')
      canvas.width = 654
      canvas.height = 480
      canvas.style.display = 'block'
      canvas.style.width = '100%'
      canvas.style.height = '100%'
      this.ctx = canvas.getContext('2d')
      videoContainer.appendChild(canvas)
      this.canvas = canvas
      // 2.初始化数据(当前播放的图片列表)
      this.currentFrameList = this.imgListAll[this.currentIdx].imgArr

      this.imgsLen = this.currentFrameList.length
      this.recordTo = this.imgsLen - 1
      // 3.设置封面
      this.drawImg(this.imgListAll[this.currentIdx].cover)
      this.currentFrame = this.currentFrameList[0].frame
    },
    // 加载图片
    drawImg(imgSrc) {
      const img = new Image()
      const that = this
      img.onload = function() {
        img.onload = null
        that.ctx.clearRect(0, 0, that.canvas.width, that.canvas.height)
        // 判断图片有没有宽度
        if (img.width !== 0) {
          // 设置画布的宽高，并使图片居中显示
          let imgWidth
          let imgHeight
          if (img.width <= 654) {
            if (img.height > 480) {
              imgHeight = 480
              imgWidth = img.width * (480 / img.height)
            } else {
              imgHeight = img.height
              imgWidth = img.width
            }
          } else {
            if (img.height > 480) {
              const a = 654 / img.width
              const b = 480 / img.height
              if (a <= b) {
                imgWidth = img.width * a
                imgHeight = img.height * a
              } else {
                imgWidth = img.width * b
                imgHeight = img.height * b
              }
            } else {
              imgWidth = 654
              imgHeight = img.height * (654 / img.width)
            }
          }
          that.ctx.drawImage(
            img,
            Math.round((654 - imgWidth) / 2),
            Math.round((480 - imgHeight) / 2),
            imgWidth,
            imgHeight
          )
        }
      }
      img.onerror = function(e) {
        console.log(e)
      }
      img.src = imgSrc
    },
    // 播放方法 | 从当前位置播放动画，会继承上次使用fromTo、form或to的属性
    play() {
      if (this.currentFrameList.length === 0) {
        return
      }
      this.fromTo(this.recordFrom, this.recordTo, this.loop)
      this.ispause = false
    },
    fromTo(from, to, loop) {
      const self = this

      // 先清除上次未执行完的动画
      clearInterval(this.timer)

      const timeFn = function timeFn() {
        if (self.ispause) {
          return
        }
        // 当总量计数器达到帧总量的时候退出
        if (self.plusNum <= self.plusCount) {
          self.resetData()
          return
        } else {
          // 未达到，继续循环
          // 帧计数器
          self.count++
          // 一次循环结束，重置keyCount为from
          if (self.count > to) {
            self.count = from
          }
          self.goto(self.count)
          // 总量计数器
          self.plusCount++
        }
      }
      // 总量计数器
      this.plusCount = 0

      loop = !loop || loop === 'infinite' ? this.infinite : loop

      // 帧总量 帧数*循环次数first
      this.plusNum = (to - from + 1) * loop
      this.ispause = true

      this.recordFrom = from
      this.recordTo = to
      this.loop = loop

      timeFn()
      this.timer = setInterval(timeFn, 1000 / this.fps)
    },
    // 暂停
    pause() {
      this.ispause = true
    },
    // 跳到某一帧
    goto(n) {
      this.count = n
      this.drawImg(this.currentFrameList[n].imgUrl)
    },
    //  上一帧
    prev() {
      this.ispause = true
      const n = this.count - 1 < 0 ? this.imgsLen - 1 : this.count - 1
      this.goto(n)
    },
    //  下一帧
    next() {
      this.ispause = true
      const n = this.count + 1 >= this.imgsLen ? 0 : this.count + 1
      this.goto(n)
    },
    // 置顶置尾
    goFor(type) {
      this.resetData()
      if (type === 'frist') {
        this.resetData()
        this.goto(0)
      } else {
        this.resetData()
        this.goto(this.currentFrameList.length - 1)
      }
    },
    //  销毁对象
    destroy() {
      clearInterval(this.timer)
      this.timer = null
      this.ctx = null
      this.canvas && this.canvas.remove()
      this.canvas = null
    }
  }
}
</script>
<style lang="scss" scoped>
.videoBoxCls {
  display: flex;
  justify-content: center;
  align-items: center;
  padding-top: 10px;
  box-sizing: border-box;
  .left-list {
    width: 225px;
    flex: 0 0 auto;
    height: 550px;
    border-right: 1px solid #ccc;
    padding: 0 16px 0 9px;
    box-sizing: border-box;
    overflow: auto;
    /* //滚动条的宽度 */
    &::-webkit-scrollbar {
      width: 5px !important;
      height: 5px !important;
    }
    .item-cls {
      width: 200px;
      position: relative;
      &:hover {
        .hoverTiltle {
          display: block;
        }
      }
      .hoverTiltle {
        display: none;
        background: #ffffff;
        padding: 0 5px;
        position: fixed;
        color: #333 !important;
        font-size: 12px;
        line-height: 24px;
        white-space: nowrap;
        z-index: 99999;
      }
      .img-box {
        width: 200px;
        height: 128px;
        cursor: pointer;
        display: flex;
        justify-content: center;
        align-items: center;
        img {
          max-width: 196px;
          max-height: 124px;
        }
      }
      .current {
        border: 2px solid #3390e0;
      }
      .img-title {
        width: 100%;
        height: 34px;
        line-height: 34px;
        text-align: center;
        padding: 0 10px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        cursor: default;
      }
    }
  }
  .right-con {
    width: 654px;
    height: 540px;
    flex: 0 0 auto;
    margin: 0 10px 10px;
    .videoContainer {
      width: 654px;
      height: 480px;
      .el-loading-mask {
        background-color: rgba(255, 255, 255, 0.3);
      }
    }
    .frameBox {
      width: 100%;
      border: 1px solid #dbdbdb;
      .frame {
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: flex-end;
        height: 20px;
        // background: #EDEDED;
        // padding: 0 6px;
        box-sizing: border-box;
        // border-bottom: 1px solid #DBDBDB;
        .frameItem {
          height: 12px;
          flex: 1 1 auto;
          cursor: pointer;
          position: relative;
          &:hover {
            .hovFrame {
              display: block;
            }
          }
          .hovFrame {
            position: absolute;
            top: -27px;
            left: 0;
            background: #e5e5e5;
            // height: 26px;
            line-height: 26px;
            padding: 0 5px;
            display: none;
            white-space: nowrap;
          }
        }
        .error {
          background: #ededed;
        }
        .success {
          background: #d4d4d4;
          &:hover {
            background: #3390e0;
          }
        }
        .currentFrane {
          background: #3390e0;
        }
      }
      .videoBtn {
        width: 100%;
        height: 38px;
        position: relative;
        .frame-title {
          position: absolute;
          top: 6px;
          left: 9px;
          background: #e5e5e5;
          height: 26px;
          line-height: 26px;
          padding-left: 18px;
          padding-right: 27px;
          font-size: 12px;
          color: #333;
          border-radius: 2px;
        }
        .btn-box {
          margin: 0 auto;
          width: 145px;
          height: 38px;
          display: flex;
          justify-content: space-between;
          align-items: center;
          .goTopCls {
            width: 12px;
            height: 13px;
            cursor: pointer;
            background-size: cover;
            background-image: url('~@/assets/images/videoPre/com-t.png');
            &:hover {
              background-image: url('~@/assets/images/videoPre/hover-t.png');
            }
            &:active {
              background-image: url('~@/assets/images/videoPre/click-t.png');
            }
          }
          .prevCls {
            width: 8px;
            height: 13px;
            cursor: pointer;
            background-size: cover;
            background-image: url('~@/assets/images/videoPre/com-l.png');
            &:hover {
              background-image: url('~@/assets/images/videoPre/hover-l.png');
            }
            &:active {
              background-image: url('~@/assets/images/videoPre/click-l.png');
            }
          }
          .play {
            width: 22px;
            height: 22px;
            cursor: pointer;
            background-size: cover;
            background-image: url('~@/assets/images/videoPre/com-p.png');
            &:hover {
              background-image: url('~@/assets/images/videoPre/hover-p.png');
            }
            &:active {
              background-image: url('~@/assets/images/videoPre/click-p.png');
            }
          }
          .pause {
            width: 22px;
            height: 22px;
            cursor: pointer;
            background-size: cover;
            background-image: url('~@/assets/images/videoPre/com-v.png');
            &:hover {
              background-image: url('~@/assets/images/videoPre/hover-v.png');
            }
            &:active {
              background-image: url('~@/assets/images/videoPre/click-v.png');
            }
          }
          .nextCls {
            width: 8px;
            height: 13px;
            cursor: pointer;
            background-size: cover;
            background-image: url('~@/assets/images/videoPre/com-r.png');
            &:hover {
              background-image: url('~@/assets/images/videoPre/hover-r.png');
            }
            &:active {
              background-image: url('~@/assets/images/videoPre/click-r.png');
            }
          }
          .goLastCls {
            width: 12px;
            height: 13px;
            cursor: pointer;
            background-size: cover;
            background-image: url('~@/assets/images/videoPre/com-b.png');
            &:hover {
              background-image: url('~@/assets/images/videoPre/hover-b.png');
            }
            &:active {
              background-image: url('~@/assets/images/videoPre/click-b.png');
            }
          }
        }
      }
    }
  }
}
</style>

Tips:进度条根据图片数绘制

Janice_97
关注
  • 1
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
序列帧播放图片，利用canvas插件实现
weixin_48487319的博客
09-03 1524
①可以控制播放图片帧率 ②可以控制图片多少s内完成播放
vue3使用canvas实现图层的移动、缩放、旋转等其他编辑操作
不怕麻烦的鹿丸的博客
08-25 3245
一些简单有规则的图形，比如矩形，椭圆，多边形......我们可以使用一些数学函数来计算判断。这种方式非常棒，当你的画布上没有大量的图形时，他可能是非常快的。但是这种方式很难处理那些非常复杂的几何图形。比如说，你正在使用具有二次曲线的线。
canvas实现图片逐帧播放
xiaoming4965的博客
02-22 544
canvas实现图片逐帧播放
vue裁剪gif图片并保持动画效果(1)
2401_84153270的博客
05-14 889
自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！
Vue利用Canvas实现逐帧播放图片不闪烁(Vue解决逐帧播放图片闪烁问题)
weixin_42644340的博客
12-28 2872
Vue利用Canvas实现逐帧播放图片不闪烁前言Vue代码实现实现效果 前言 Vue采用<el-image :src="src"></el-image>，通过动态改变图片地址来实现逐帧播放图片会引起严重的闪烁问题。原因是因为采用这种方式每次在切换图片时它都会先销毁上一张图片，从而暴露出背景颜色，再加载新的图片，因此产生严重的闪烁问题。要想解决此问题可以利用Canvas将图片绘制在画布上，当加载新图片时不去销毁上一张图片，这样就能解决逐帧播放图片闪烁的问题了。 接下来先展示下我们一会逐
vue轮播图帧率播放
qq_44393247的博客
01-25 585
vue实现图片帧率轮播播放需求代码问题 哈喽，本人目前从事的是前端，这是发的第一个帖，以后遇到的问题都会在这里记录下来，有什么问题可以私信，一起成长，欢迎交流哈，公司做项目是关于三维地图开发，入职的第二个星期周六周日就加班了 = =。 需求 传入一个数组，数组中放的是目录名称，通过本目录名称，读取文件目录下的所有图片，并循环播放，形成一个每1s播放多少张图片的效果，最后目录播放完毕后，在跳到第一个目录循环播放。 代码 HTML <template> <div id="imgPl
HTML5 Canvas 逐帧动画的实现
qq_25600055的专栏
06-22 2078
和C++游戏开发相同，HTML5逐帧动画需要的图像元素也是一张绘制了每一帧图像效果的图片。通过循环绘制各帧的图像来实现动画的效果。 本示例中演示的是一个小人，默认状态下，小人朝右方站立；按下左/右方向键的时候，小人朝左/右方奔跑（在画布中没有位移）；松开按键后保持奔跑的方向站立。 其中，向左或向右站立分别是一张6帧的图片，向左或向右奔跑分别是一张12帧的图片。 代码如下：
Vue+Video.js实现视频抽帧返回抽帧图片Base64
weixin_60457220的博客
01-15 540
【代码】Vue+Video.js实现视频抽帧返回抽帧图片Base64。
开源＆Vue3＋TS | 王者荣耀图鉴
qq_45831083的博客
05-29 981
收集王者荣耀游戏的英雄、皮肤、技能、语音、装备、铭文等资料，支持对数据筛选、排序来获得相关信息。加入了邮箱、铭文搭配、背包、商城、乂宝、夺宝、竞猜活动等功能供大家娱乐。
前端面试+学习笔记（HTML+CSS+JavaScript+ES6+Vue+NodeJs）
热门推荐
qq_44891434的博客
01-29 1万+
前端面试+学习笔记（HTML+CSS+JavaScript+ES6+Vue+NodeJs） 一. HTML 1. 盒子模型 是什么：每个元素被表示为一个矩形的盒子，有四个部分组成：内容（content）、内边距（padding）、边框（border）、外边距（margin）。它在页面中所占的实际大小（宽高）是content+padding+border+margin之和。 盒模型有两种：标准盒模型（W3C盒模型）、IE盒模型。 两种盒模型的区别：标准盒模型内容大小就是content大小、而IE
牛逼的canvas粒子沙漏动画
10-23
【压缩包子文件的文件名称列表】：“html5-canvas-image-flow-time”很可能包含了实现这个粒子沙漏动画所需的所有资源，如HTML文件、CSS样式表、JavaScript脚本以及可能的图片文件。HTML文件将包含canvas元素和相关...
HTML5调用手机摄像头拍照的实现思路及代码
09-28
4. **图片数据获取**：一旦在canvas上绘制了视频帧，我们就可以通过`toDataURL`方法将canvas的内容转换为一个data URL，通常是一个Base64编码的PNG或JPEG图像。这使得我们可以将图片保存到服务器，或者在网页上显示...
js如何调用摄像头,可直接使用的源代码
07-15
除了基本的视频预览，还可以使用`canvas`元素捕获帧并进行图像处理。例如，将摄像头画面转为Base64编码的图片数据： ```javascript var canvas = document.createElement('canvas'); var ctx = canvas.getContext('...
仿照昵图网写的前端页面
11-15
- **坦克大战**（坦克大战.html）：虽然这不是常见的前端开发项目，但如果在网页上实现简单的游戏，可能涉及到JavaScript的事件监听、动画帧更新以及可能的canvas绘图。 总的来说，这个项目涵盖了前端开发中的基本...
Desktop.zip
06-30
【压缩包子文件的文件名称列表】中提到的"组 26.png"和"组 27.png"可能是一系列截图或动画帧，展示了网页特效的实际效果。这些图片可能用于预览特效，帮助开发者理解如何在自己的项目中应用这些效果。通过分析这些...
ASP.NET Web Api 使用 EF 6，DateTime 字段如何取数据库服务器当前时间
最新发布
yangshuquan的专栏
07-24 835
在做数据库设计时，为了方便进行数据追踪，通常会有几个字段是每个表都有的，比如创建时间、创建人、更新时间、更新人等，这些时间字段一般存储的是数据库服务器的时间，EF 是操作整个数据表对象，所以需要寻找方法来实现这个目的。本文分享 DB First 和 Code First 两种模式的 EF 中 DateTime 字段如何存储数据库服务器当前时间的方法。
Hutool SoapClient 调用使用@webservice 发布的webService接口，参数传递为空
FangX_u的博客
07-24 621
采用工具类Hutool SoapClient调用@webservice 发布的webService接口时，参数传递不到webService,可以借助SoapUI工具辅助查看。
Windows10+vs 2017中创建WEB API教程
Explinks的博客
07-24 1051
本文将介绍如何在Windows10+vs 2017中创建web Api的教程。目前本教程当中的方法在Win10 + VS2017（MVC5）win server2016+vs2017，vs2013 vs2019当中测试通过。
vue动态设置文字布局方式_VUE+Canvas实现输入文字生成对应的字体图片小功能
06-03
可以通过以下步骤来实现输入文字生成对应的字体图片的小功能： 1. 在Vue中创建一个canvas标签，并设置其宽高。 2. 创建一个input标签，用于输入文字。 3. 在Vue的methods中定义一个函数，用于将输入的文字绘制到canvas上。 4. 在函数中，获取canvas的上下文对象，并设置字体、颜色等样式。 5. 调用context.fillText()方法将输入的文字绘制到canvas上。 6. 将canvas转换为图片，可以使用canvas.toDataURL()方法将canvas转换为base64编码的图片格式。 7. 在Vue模板中使用img标签来展示生成的图片。 以下是代码示例： 1. HTML模板 ``` <template> <div> <canvas ref="canvas" :width="canvasWidth" :height="canvasHeight"></canvas> <div> <input type="text" v-model="text" @input="drawText" /> </div> <div> <img :src="imgSrc" /> </div> </div> </template> ``` 2. Vue组件 ``` <script> export default { data() { return { text: "", canvasWidth: 200, canvasHeight: 200, imgSrc: "", }; }, methods: { drawText() { const canvas = this.$refs.canvas; const context = canvas.getContext("2d"); context.clearRect(0, 0, this.canvasWidth, this.canvasHeight); context.fillStyle = "#000"; context.font = "30px Arial"; context.textBaseline = "middle"; context.textAlign = "center"; context.fillText(this.text, this.canvasWidth / 2, this.canvasHeight / 2); this.imgSrc = canvas.toDataURL(); }, }, }; </script> ```
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值