视屏截图功能的实现（canvas)

视屏截图功能的实现（canvas）

<template>
        <div>
            <video
              class="shotVideo"
              src="http://xxxx.com"
              controls="true"
              width ="400"
              height ="400"
              >
            </video>
            <image
              :src="imgSrc"
              class="imgShow">
            </image>
            <button  @click="printScreen()">              
            </button>
        </div>
</template>


<script>
	...
	  printScreen(){
            let video =document.querySelector("shotVideo");
            let canvas = document.createElement("canvas");
            canvas.width =video.width;
            canvas.height =video.height;
            console.log(canvas.width,canvas.height,"canvas.width");
            let ctx = canvas.getContext("2d");
            ctx.drawImage(video,0,0,canvas.width,canvas.height)
            let img = document.querySelector("showImg");
            this.imgSrc = canvas.toDataURL();
        }

</script>