Canvas学习之截取视频并绘制

复习

上一节中,我们学习了如何将一张图片绘制到canvas中去。

想要将一张图片绘制到canvas中,有两种方法,第一种是将图片作为颜料加入进去,也就是将图片作为fillStyle或者strokeStyle的属性值,但这个方法有个风险,图片能否画全,图片大小,我们完全不可控。第二种方法就是drawImage方法,此方法可控且可配置。

  • 单纯的把图片绘制到canvas上

如果你单纯的只是想画一张图到canvas中去,那么你只需要使用drawImage(img,x,y)即可,img表示获取到的图像,这个图像可以是从网络上获取的,也可以是获取到的dom,还可以是另外一个canvas甚至从视频中截取一帧来;x表示绘制的图片左上角的横坐标的位置,y表示绘制的图片左上角纵坐标的位置。这个时候绘制的图片,大小是原图的大小,出了起始点可控,其它的都不可控。图片大小如果超出canvas的大小,就会有溢出的可能。

  • 对图片大小进行控制

    不能控制图片的大小,我们绘制到canvas上去的意义就不大,因此,我们需要绘制的图片大小也受咱们控制。在这里,我们只需要在上面的基础上再添加一个宽度和高度就可以了。drawImage(img,x,y,width,height)前三个参数我们已经很清楚,后面width是指绘制到canvas上的图像大小,不是原图的宽度,height也是指绘制到canvas上的图像大小,不是原图的高度。

学习

上节我们说获取视频中的一帧作为图片源来绘画比较难,留到这节来学。其实,从视频中获取图片的难处并不在于技术,而在于将静态的图片和动态的视频结合在一起时,我们的思维转变。这里要清楚,视频必须是在播放着的。下面,我们开始。

1.写代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<html>
<video src="https://ugcws.video.gtimg.com/uwMROfz2r5zCIaQXGdGnCmdfDmYzWzTa7xVA7jv8ju9BnA4n/o08798bnrqs.mp4?sdtfrom=v1010&guid=5d2466bc18b6fddef239a6717c405f76&vkey=C77CE91616F02B1924147885EF4578D6E8AD4785C2FA3B827CC4C5F120CD2A569843CFC26C72E1C9A3A1CF0A13B0F546D43AC9E2A2B6F04180A98EF56624F8DC4BD1832A47B63E74B69FEAAEBC82D533E159173EF662799CD600073171E9947BF00A995224BD978B55937A1639B235F72AA7DFA6E7C3C5D6EDF762CB56B5ACCB" controls="controls" id="myVideo" width="400" height="400"></video>
<canvas width="400" height="400" id="mycanvas"></canvas>
<button onClick="draw()">截取视频绘制到canvas上</button>
</html>
<script>
function draw() {
const canvas = document.getElementById('mycanvas')
if (canvas.getContext) {
const img = document.getElementById('myVideo')
const ctx = canvas.getContext('2d')
ctx.drawImage(img,0,0,400,400)
}
}
</script>

2.首先播放视频,然后点击button,你就会看到,你点击时的那个画面,在canvas上绘制了出来

下面是我在线保存的视频,你可以自己动手去试试