react在视频中截图,保存为base64位

wq:之前看了网上很多教程,有点模糊,但是最后还是搞了出来

1  不要将视频放到canvas上面!  之前一直将video重新画到canvas上面,然后再次将第一个canvas放到第二个canvas上面,其实这样做的是冗余的一步,直接放video标签就可以了

2   和图片相似的,video标签也需要

                      <video

                       controls = "controls"

                       crossorigin = "anonymous"

                       width='200'

                       height='300'

                       src = {detail.video}/>

 crossorigin = "anonymous" 的属性,让画布不再被污染,可以使用toDataURL转变为base64

部分代码如下:

js:

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框架