vue 윤방도 프레임 재생 실현

본고의 실례는 여러분에게 vue가 윤방도 프레임 재생을 실현하는 구체적인 코드를 공유하여 참고하도록 하였으며, 구체적인 내용은 다음과 같다.

수요

하나의 수조에 전송됩니다. 수조에 놓인 것은 디렉터리 이름입니다. 이 디렉터리 이름을 통해 파일 디렉터리에 있는 모든 그림을 읽고 순환하여 재생합니다. 1s당 몇 장의 그림을 재생하는 효과가 있습니다. 마지막으로 디렉터리가 재생된 후에 첫 번째 디렉터리로 이동하여 순환합니다.
핵심: 웹 팩의 API require를 사용합니다.contex는 디렉터리에 있는 파일 이름을 읽습니다. 구체적으로 알고 싶은 것은 찾아보십시오.

코드

HTML

<template>
 <div id="imgPlay" ref="container" :style="[style]">
 <img :src="imgsrc" :style="[{height:style.height,width:style.width}]">
 <div id="but">
  <button @click="start()"> </button>
  <button @click="stop()"> </button>
 </div>
 </div>
</template>

javascript

<script>
export default {
 name: 'ZxImgPlay',
 data () {
 return {
  style:[
 width:"50px",
 height:"50px"
 ],
  interval: null, //  id
  flag: true, //  
  setIntervalNumber: 0, //  
  imgsrc: "", //  
  imgUrls: [], //  
  frameRate: 0 //  
 }
 },
 computed: {},
 watch: {},
 created () { },
 mounted () {
 this.zxInit()
 },
 beforeDestroy () { },

 methods: {
 zxInit () {
 //   this.DisplayParam  ， 
 // this.DisplayParam.frameRate  [" 1"," 2"]
 // this.DisplayParam.imgUrls  
 // this.DisplayParam.frameRate  
  this.frameRate = this.DisplayParam.frameRate && (1000 / this.DisplayParam.frameRate)
  this.imgUrls = this.DisplayParam.imgUrls
  this.DisplayParam.imageFileName != 0 ? this.readdir(this.DisplayParam.imageFileName) : this.showImages(true)
 },

 start () {
  if (this.flag) return
  this.showImages()
  this.flag = true
 },

 stop () {
  this.flag = false
  clearInterval(this.interval)
 },

 readImages (imageFileName, _A) {
  this.stop()
  let req = require.context("@/../static/images", true, /\.(?:bmp|jpg|gif|jpeg|png)$/).keys();
  let path = new RegExp(imageFileName[_A])
  req.forEach(item => {
  if (path.test(item)) {
   this.imgUrls.push({ img: "@/../static/images/" + imageFileName[_A] + item.substring(item.lastIndexOf('/')) })
  }
  })
  this.showImages()
 },
 readdir (imageFileName) {
  this.imgUrls = []
  for (let i = 0; i < imageFileName.length; i++) {
  this.readImages(imageFileName, i)
  }
 },

 showImages (_B) {
  if (_B) this.imgUrls = this.imgUrlsSort(this.imgUrls, 'sort')
  console.log(this.imgUrls)
  this.interval = setInterval(this.setIntervalFun, this.frameRate)
 },

 imgUrlsSort (ary, key) {
  return ary.sort((a, b) => {
  let x = a[key];
  let y = b[key];
  return ((x < y) ? -1 : (x > y) ? 1 : 0)
  })
 },

 setIntervalFun () {
  if (this.setIntervalNumber >= this.imgUrls.length) {
  this.setIntervalNumber = 0
  }
  this.imgsrc = this.imgUrls[this.setIntervalNumber++].img || ''
 }
 }
}
</script>

문제
상술한 이렇게 하면 이미 기능을 실현하였으나, 현재로서는 두 가지 문제를 발견하였다
1、require.context () 이 API의 첫 번째 매개 변수는 변수와 같은 변수를 사용할 수 없습니다. 경고가 있습니다.
2. 상기 코드는 그림을 계속 바꾸는 src가 이루어진다. 즉, src를 바꿀 때마다 http 요청을 보내서 그림을 가져오기 때문에 메모리가 방출되지 않고 계속 증가한다.
이상은 본문의 전체 내용입니다. 여러분의 학습에 도움이 되고 저희를 많이 응원해 주십시오.