利用canvas画布裁剪视频

马黑黑

canvas加载视频完整的语法如下：

    drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)

共 9 个参数：

① image - 图像，如果是视频，则是视频元素的 id；
② sx - 图像源需要切片的起始X坐标；
③ sy - 图像源需要切片的起始Y坐标；
④ sWidth - 图像源需要切片的宽度；
⑤ sHeight - 图像源需要切片的高度；
⑥ dx - 画布开始绘制图像的X坐标；
⑦ dy - 画布开始绘制图像的Y坐标；
⑧ dWidth - 画布中要绘制图像的宽度；
⑨ dHeight - 画布中要绘制图像的高度。

我们以熊猫办公的MP4为例，切片的目的是将“熊猫办公”的字样去掉。这要剪裁视频上方的即Y轴从上往下的一部分，以 1024*576的呈现目标为例，我们可能需要从视频的Y轴的 42 像素处开始剪裁：

    drawImage(image, 0, 42, 1024, 576, 0, 0, 1024, 576)

看得出来，第三个参数不是 0 而是 42，表示视频的纵向方向从上往下的第 42 个像素开始裁剪，换言之，0到42的纵向部分不要。

下面的代码请自行体会，效果在后面的回复可以看到：

1. <style>
   
2. #vid { display: none; }
   
3. #canv {
   
4.         margin: 0 0 0 calc(50% - 593px);
   
5.         display: block;
   
6.         position: relative;
   
7. }
   
8. </style>
   
9. 
   
10. <video id="vid" src="https://img.tukuppt.com/video_show/2405179/00/01/50/5b4465a5b8366.mp4" autoplay loop></video>
    
11. <canvas id="canv" width="1024" height="576"></canvas>
    
12. 
    
13. <script>
    
14. 
    
15. let cav = canv.getContext('2d');
    
16. vid.addEventListener('play', loop, false);
    
17. 
    
18. function loop() {
    
19.   cav.drawImage(vid, 0, 42, canv.width, canv.height, 0, 0, canv.width, canv.height);
    
20.   if(!vid.paused) {
    
21.     requestAnimationFrame(loop);
    
22.     return;
    
23.   }
    
24. }
    
25. 
    
26. </script>

复制代码

马黑黑

马黑黑

视频地址：

https://img.tukuppt.com/video_sh ... 0/5b4465a5b8366.mp4

马黑黑

提示：如果不需要剪裁图像的任何地方，则可以省略 drawImage 方法的 第二至第五个参数，整个语句为——

    drawImage(image, x, y, Width, Height)

这将完整加载图像，从画布的 {x,y} 坐标开始，呈现出来的图像为指定的宽度与高度。

红影

这个只是很实用，太好了

马黑黑

醉美水芙蓉 发表于 2023-3-8 21:57
这个好，可以广告字去掉了！

马黑黑

红影 发表于 2023-3-8 22:00
这个只是很实用，太好了

和视频的自我裁剪效果差不多

亦是金

好东西，很实用！可以剪除视频中的不采用的部分。谢谢黑黑老师的教程！

东篱闲人

马黑黑

东篱闲人 发表于 2023-3-8 22:26

喝水

马黑黑

亦是金 发表于 2023-3-8 22:22
好东西，很实用！可以剪除视频中的不采用的部分。谢谢黑黑老师的教程！

之前也有一个剪裁视频的

红影

马黑黑 发表于 2023-3-8 22:14
和视频的自我裁剪效果差不多

画布可以画图图，还能画视频，厉害了。

马黑黑

红影 发表于 2023-3-8 23:13
画布可以画图图，还能画视频，厉害了。

视频就是一帧一帧的图像

风中飞尘

剪影 一下子搞定了

马黑黑

风中飞尘 发表于 2023-3-8 23:47
剪影 一下子搞定了

之前介绍过。现在这个是不同的功用

虎妞

马黑黑 发表于 2023-3-8 21:41
#vid { display: none; }
#canv {
        margin: 0 0 0 calc(50% - 593px);

厉害，厉害，膜拜膜拜！
我我我是来看天书的

庶民

给你添一点点赞，也算俺的微薄赞助！

马黑黑

庶民 发表于 2023-3-9 04:45
给你添一点点赞，也算俺的微薄赞助！

谢谢

马黑黑

虎妞 发表于 2023-3-9 01:01
厉害，厉害，膜拜膜拜！
我我我是来看天书的

天书要认真读