canvas 截图

需求：在视频播放的时候截图并且下载图片

html:

<canvas width="100" height="100" id="myCanvas"></canvas>

js:

getCanvasPic() { // 截图

    const c = document.getElementById('myCanvas')

    const cxt = c.getContext('2d')

    const video = document.querySelector('#remoteVideo')
    
    cxt.drawImage(video, 0, 0, 425, 720)

    this.downLoad(this.saveAsPNG(c))

},

saveAsPNG(canvas) { // 转为图片

    return canvas.toDataURL('image/png')

},

downLoad(url) { // 下载图片

    const oA = document.createElement('a')

    oA.download = ''// 设置下载的文件名，默认是'下载'

    oA.href = url

    document.body.appendChild(oA)

    oA.click()

    oA.remove() // 下载之后把创建的元素删除

}

canvas知识点

1. 创建一个画布

<canvas id="myCanvas" width="200" height="100"></canvas>

注意: 标签通常需要指定一个id属性 (脚本中经常引用), width 和 height 属性定义的画布的大小. 提示:你可以在HTML页面中使用多个 <canvas> 元素.

2. 使用javascript绘制图像

var c=document.getElementById("myCanvas"); // 找到 <canvas> 元素:

var ctx=c.getContext("2d"); // 创建 context 对象：getContext("2d") 对象是内建的 HTML5 对象，拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。

3. 把一幅图像放置到画布上, 使用方法drawImage(image,x,y) 参数只能是3,5,9个，具体百度