jietu = () => {
var video = document.getElementsByTagName(‘video‘)[0];
video.crossorigin = ‘anonymous‘
var canvas = document.getElementById(‘canvas‘);
var cobj = canvas.getContext(‘2d‘); //获取绘图环境
cobj.drawImage(video, 0, 0, 200, 300);
let base64 = canvas.toDataURL(‘image/jpeg‘, 0.5)
console.log(base64)
}
div;
<div className={styles.canvasContent}>
<Button onClick = {this.jietu}>点击截图</Button>
<div className={styles.videoCopy}>
<video
controls = "controls"
crossorigin = "anonymous"
width=‘200‘
height=‘300‘
src = {detail.video}/>
<canvas id="canvas" width = "200" height = "300" backgroundColor=‘#ccc‘ onClick={this.clickCanvas} ></canvas>
</div>
</div>
这样的话就可以直接将视频里面的截图到canvas里面
ps:此为react框架
