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