通过 html2canvas对video视频点击按钮进行截取视频图片，获取base64图片

1.对播放视频进行截取图片演示

2. npm安装 html2canvas 或者直接下载html2canvas.js引用都可以

2.1 npm安装

cnpm i html2canvas

2.2 直接下载引用js包

html2canvas.js下载

3. 完整代码

<template>
	<view>
		<view>
			<video id="myVideo" src="/static/video.mp4" ref="localVideo" :muted="muted" autoplay controls></video>
		</view>
		<image :src="src" style="width: 100%;height: 35vh;"></image>
		<button @click="onClick">截图</button>
	</view>
</template>
<script>
	import html2canvas from "./js/html2canvas.js";
	export default {
      
      
		data() {
      
      
			return {
      
      
				muted: true,
				src: "",
			}
		},
		methods: {
      
      
			onClick(event, ownerInstance) {
      
      
				html2canvas(document.getElementById("myVideo"), {
      
      
					backgroundColor: null,
					useCORS: true // 如果截图的内容里有图片,可能会有跨域的情况,加上这个参数,解决文件跨域问题
				}).then((canvas) => {
      
      
					let url = canvas.toDataURL('image/png');
					this.src = url;
				})
			},
		}
	}
</script>
<style lang='scss' scoped>
	#myVideo {
      
      
		width: 100%;
		height: 40vh;
		background: red;
	}
</style>

4. 坑，报错

Uncaught (in promise) Error: Element is not attached to a Document

解决办法：

html2canvas参数，通过原生的document.getElementById("myVideo")获取，不用使用refs的this.$refs.localVideo 获取

5. 视频截图并下载

点击拍照，进行对视频截图

onClick() {
    
    
      html2canvas(document.getElementById("myVideo"), {
    
    
        useCORS: true, //图片跨域，开启跨域配置
        logging: false, //日志开关，便于查看html2canvas的内部执行流程
        taintTest: true, //是否在渲染前测试图片
      }).then((canvas) => {
    
    
        // 转成图片，生成图片地址
        let imgUrl = canvas.toDataURL("image/png") //可将 canvas 转为 base64 格式
        let eleLink = document.createElement("a")
        eleLink.href = imgUrl // 转换后的图片地址
        eleLink.download = "webrtc 视频截图"
        document.body.appendChild(eleLink)
        eleLink.click()
        document.body.removeChild(eleLink)
      })
},