vue 视频截屏

article/2025/9/17 17:40:48

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.heightlet 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) => {// base64const 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},// 下载方法2downFile(base){const base64List = base.split(',')[1]const raw = window.atob(base64List)const rawLength = raw.lengthconst 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 = fileNameaLink.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>