js截取图片_原生JavaScript实现截取视频第一帧作为图片

最新推荐文章于 2024-07-18 13:56:52 发布

weixin_39928768

最新推荐文章于 2024-07-18 13:56:52 发布

阅读量989

点赞数

文章标签： js截取图片

第一步

新建一个 video ，放置需要截取的视频文件

Eg：

在 JS 中获取video标签,并监听它的 loadeddata 事件：

loadeddata : 当媒体当前播放位置的帧完成加载时触发该事件; 通常是第一帧。

Eg:

video = document.getElementById("video");video.addEventListener('loadeddata', function() { });

在监听 loadeddata 中指定事件触发时执行的函数。我们的实现截取第一帧就在这里面编写。

1，定义创建一个 canvas 标签;

2，指定 canvas 标签的宽高;

3, 调用canvas元素中的 getContext() 方法(返回一个用于在画布上绘图的环境)。

Eg:

let canvas = document.createElement("canvas")canvas.width = video.videoWidthcanvas.height = video.videoHeightlet ctx = canvas.getContext('2d')

此时我们已经拥有了一个有着固定宽高并且有一个用于在画布上绘图的环境。

之后调用ctx (画布的2d绘图的环境)中的 drawImage 方法来在画布上定位图像，并规定图像的宽度和高度：

ctx.drawImage(img,x,y,width,height)

此时此刻我们的canvas中已经有图像了，若想看效果，将 canvas 插入到 body 即可。

document.body.appendChild(canvas)

不过我们要的是插入到 img 标签中，所以还需要调用一个api !

1, 定义创建一个img

2, 调用 canvas 中的 toDataURL 方法:

HTMLCanvasElement.toDataURL() 方法返回一个包含图片展示的 data URI 。可以使用 type参数其类型，默认为 PNG 格式。图片的分辨率为96dpi。

语法：

canvas.toDataURL(type, encoderOptions);

type图片格式，默认为 image/png

encoderOptions 图片质量；在指定图片格式为 image/jpeg 或 image/webp的情况下，可以从 0 到 1 的区间内选择图片的质量。如果超出取值范围，将会使用默认值 0.92。其他参数会被忽略。

let img = document.createElement("img")img.src = canvas.toDataURL("image/png")document.body.appendChild(img)

截取demo

关注