马黑黑 发表于 2023-3-8 21:41

利用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的纵向部分不要。

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

<style>
#vid { display: none; }
#canv {
        margin: 0 0 0 calc(50% - 593px);
        display: block;
        position: relative;
}
</style>

<video id="vid" src="https://img.tukuppt.com/video_show/2405179/00/01/50/5b4465a5b8366.mp4" autoplay loop></video>
<canvas id="canv" width="1024" height="576"></canvas>

<script>

let cav = canv.getContext('2d');
vid.addEventListener('play', loop, false);

function loop() {
cav.drawImage(vid, 0, 42, canv.width, canv.height, 0, 0, canv.width, canv.height);
if(!vid.paused) {
    requestAnimationFrame(loop);
    return;
}
}

</script>

马黑黑 发表于 2023-3-8 21:41

<style>
#vid { display: none; }
#canv {
        margin: 0 0 0 calc(50% - 593px);
        display: block;
        position: relative;
}
</style>

<video id="vid" src="https://img.tukuppt.com/video_show/2405179/00/01/50/5b4465a5b8366.mp4" autoplay loop></video>
<canvas id="canv" width="1024" height="576"></canvas>

<script>

let cav = canv.getContext('2d');
vid.addEventListener('play', loop, false);

function loop() {
cav.drawImage(vid, 0, 42, canv.width, canv.height, 0, 0, canv.width, canv.height);
if(!vid.paused) {
    requestAnimationFrame(loop);
    return;
}
}

</script>

马黑黑 发表于 2023-3-8 21:42

视频地址：

https://img.tukuppt.com/video_show/2405179/00/01/50/5b4465a5b8366.mp4

马黑黑 发表于 2023-3-8 21:47

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

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

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

醉美水芙蓉 发表于 2023-3-8 21:57

红影 发表于 2023-3-8 22:00

这个只是很实用，太好了{:4_187:}

马黑黑 发表于 2023-3-8 22:14

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

{:5_106:}

马黑黑 发表于 2023-3-8 22:14

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

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

亦是金 发表于 2023-3-8 22:22

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

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

{:5_116:}

马黑黑 发表于 2023-3-8 22:49

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


喝水{:4_190:}

马黑黑 发表于 2023-3-8 22:51

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

之前也有一个剪裁视频的

红影 发表于 2023-3-8 23:13

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

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

马黑黑 发表于 2023-3-8 23:29

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

视频就是一帧一帧的图像

风中飞尘 发表于 2023-3-8 23:47

剪影 一下子搞定了 {:5_106:}

马黑黑 发表于 2023-3-8 23:55

风中飞尘 发表于 2023-3-8 23:47
剪影 一下子搞定了
之前介绍过。现在这个是不同的功用

虎妞 发表于 2023-3-9 01:01

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


厉害，厉害，膜拜膜拜！
我我我是来看天书的{:4_170:}

庶民 发表于 2023-3-9 04:45


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

马黑黑 发表于 2023-3-9 12:10

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

谢谢

马黑黑 发表于 2023-3-9 12:10

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

天书要认真读
页: [1] 2
查看完整版本: 利用canvas画布裁剪视频