vue 视频截屏

video播放视频，一键截屏功能实现（2种方式）

1.canvas

<template>
 <div class="hik-box">
    <canvas style="display:none;width:200px;height:200px" id="myCanvas"></canvas>
    <video width="200" height="200" controls id="videos">
       <source src="./movie.mp4" type="video/mp4">
    </video>
    <el-button class="btns" @click="screenShot">一键截屏</el-button>
  </div>
</template>
<script>
 
export default{
 
    data(){
        return{
        }
    },
    methods:{
        screenShot () {
          let video = document.getElementById('videos')
          let canvas = document.getElementById('myCanvas')
          // canvas.width = video.width
          // canvas.height = video.height
          let ctx = canvas.getContext('2d')
          // 处理toDataURL遇跨域资源导致的报错
          // ctx.drawImage(video, 0, 0, video.width, video.height) 或
          ctx.drawImage(video, 0, 0, 350, 300)
          var imgbase64 = canvas.toDataURL('image/png')
          if (imgbase64) this.baseToFile(imgbase64)
        }
    },
}
</script>
<style scoped>
    
</style>

2.html2canvas

1.下载html2canvas

npm i html2canvas --save

2.页面引入

<template>
 <div class="hik-box">
    <video width="200" height="200" controls id="videos">
       <source src="./movie.mp4" type="video/mp4">
    </video>
    <el-button class="btns" @click="screenShot">一键截屏</el-button>
  </div>
</template>

<script>
import html2canvas from 'html2canvas'
export default{
 
    data(){
        return{
        }
    },
    methods:{
        // 截屏
        screenShot () {
          let video = document.getElementById('videos')
          let canvas = document.getElementById('myCanvas')
          html2canvas(video, { 
            allowTaint: true,
            useCORS: true
          }).then((canvas) => {
            // base64
            const capture = canvas.toDataURL('image/png')
            // 下载方法1，浏览器弹出下载文件提示
            const saveInfo = {
              // 导出文件格式自己定义
              'download': '文件名' + '.png',
              'href': capture
            }
            const element = document.createElement('a')
            element.style.display = 'none'
            for (const key in saveInfo) {
              element.setAttribute(key, saveInfo[key])
            }
            document.body.appendChild(element)
            element.click()
            setTimeout(() => {
              document.body.removeChild(element)
            }, 300)

            // this.downFile(capture) 下载方法2
        },
        // 下载方法2
        downFile(base){
          const base64List = base.split(',')[1]
          const raw = window.atob(base64List)
          const rawLength = raw.length
          const uInt8Array = new Uint8Array(rawLength)
          for (let i = 0; i < rawLength; ++i) {
            uInt8Array[i] = raw.charCodeAt(i)
          }
          // 下载到本地
          const fileName = this.fileName || '截屏' + '.png'
          const aLink = document.createElement('a')
          const evt = document.createEvent('HTMLEvents')
          evt.initEvent('click', true, true)
          aLink.download = fileName
          aLink.href = URL.createObjectURL(blob)
          aLink.click()

        },
        // 接口上传
        uploadFile(){
          // 若需上传，将base64转为file文件
          const blob = new Blob([uInt8Array], { type: 'image/png' })
          let fileOfBlob = new File([blob], '文件名' + '.png')}
          var formData = new FormData()
          formData.append('file', fileOfBlob)
          // 接口上传
          download(file).then(res => {
            // res，dosomething
          })
        }
    }
</script>
<style scoped>
</style>

3.tips

<1> video引入的视频地址要保证不跨域，这样才可以成功有图片，不然会出现报错toDataURL的相关报错