JS 截取视频某一帧图片实现视频截图

第一步：创建video用于存放需要截取的视频文件

                    <video id="player01" preload="auto" width="640" height="360" playsinline webkit-playsinline></video>

第二步：创建canvas画布，用于绘制截取到的图片

1，定义创建一个 canvas 标签;
2，指定 canvas 标签的宽高;
3, 调用canvas元素中的 getContext() 方法(返回一个用于在画布上绘图的环境)。

 var canvas = document.createElement("canvas");canvas.width = player.clientWidth;canvas.height = player.clientHeight;// canvas = canvas.getContext("2d")canvas.getContext("2d").drawImage(player.childNodes[0] , 0, 0, canvas.width, canvas.height);//截

要注意的是drawImage()的第一个参数不再是player而应该是**player.childNodes[0]**否则会出现如下报错：

第三步：将绘制好的图片转成base64格式

var dataURL = canvas.toDataURL("image/png");

将得到的base64格式的图片地址添加到网页中，这样就完成视频截图功能了！

完整示例代码

function screenShot() {var player = document.getElementById("player01");   //获取video的Dom节点player.setAttribute("crossOrigin", "anonymous");  //添加srossOrigin属性，解决跨域问题var canvas = document.createElement("canvas");canvas.width = player.clientWidth;canvas.height = player.clientHeight;// canvas = canvas.getContext("2d")canvas.getContext("2d").drawImage(player.childNodes[0] , 0, 0, canvas.width, canvas.height);//截var dataURL = canvas.toDataURL("image/png");  //将图片转成base64格式let str = ` <li class="screenshot-item"><div class="shot-time">2022-10-17</div><img src="${dataURL}" alt="" class="shot-img">
</li>`$("#screenshot-list").append(str);   //显示在页面中viewer.destroy(); //需要先销毁再渲染viewer = new Viewer(document.getElementById(`screenshot-list`))
}

JS 截取视频某一帧图片实现视频截图相关推荐

php截取视频第一帧为图片,把视频变成一帧一帧的图片(ae怎么把视频变成单帧) 视频截图视频画面每帧图片截取...
AE怎么把视频变成单帧?这是小编今天要与大家讨论及解决的一个问题.在视频后期处理中,有时为实现某个场景效果,需要把视频中的某帧变成静态帧图片:或者需要视频截图视频画面每帧图片截取出来,把视频变成一帧一 ...
cv2读视频文件取帧图片
希望通过cv2.VideoCapture类截取视频帧图片,期间只能截取视频的每帧图片,不能跳帧截取图片,原来是在读取视频帧的时候没有写入ret, frame = cv2.VideoCapture.re ...
java 推流_JavaCV开发详解之2：截取推流服务器视频的某帧或本地视频的某帧
引入依赖 org.bytedeco javacv 1.5.3 org.bytedeco javacv-platform 1.5.3 代码实现 package com.java.mmzsblog; im ...
查看视频的IPB帧，IPB帧编码顺序，视频的第一帧图片
> 如何查看视频的IPB帧 Android, 如何获取视频的每一帧的信息视频 = 图片.图像(摄像头) + 声音(麦克风) : 谷歌官方给我们的提供的api接口类:MediaMetadataR ...
如何获取网络视频（或者说后台返回视频URL）第一帧图片以及获取本地视频的第一帧图片
在项目开发的时候,有可能会有这样的一种需求:有一段视频需要展示给用户,在界面上先展示视频上的某一帧图片,用户点击的时候再去获取视频资源进行播放.这时,服务器会先给我们返回视频的url,这个时候就需要通 ...
html怎么用视频做网页背景图片,使用视频作为网页背景的技术探讨
使用视频作为网页背景是件很酷的事情,但也是件困难的事情.CSS里的background-image属性只能使用图片.SVG.颜色或渐变色.但从技术讲,我们是可以伪造出一种效果,让视频以背景的角色出现在 ...
C++Opencv实时读取摄像头视频保存指定帧图片
空格截图到指定文档 string writePath = "../temp/"; int main(int argc, char** argv){VideoCapture capt ...
Android 获取网络视频某一帧图片
获取网络视频的某一帧作为封面图,可以使用Glide实现,但是效果不是很好,主要问题就是加载慢,有几秒的延迟.这里利用Android提供的MediaMetadataRetriever类来获取.Media ...
利用OpenCV将连续帧图片转换为视频
最近在做运动人体识别与跟踪的本科毕设,总是找不到好的测试视频.这几天在网上找了很多数据集,挂代理很长时间下载下来发现虽然挺好,但是为什么都是一帧一帧的...搜寻了一些博客,能够把连续帧图片转成视频了. ...
vue 获取上传视频的第一帧做为视频封面
上一篇文章记录了vue上传视频,接下来,需要在上传成功后截取视频第一帧做为视频封面. 截取视频第一帧具体实现如下: <template><div><div v-if=& ...

JS 截取视频某一帧图片实现视频截图

第一步：创建video用于存放需要截取的视频文件

第二步：创建canvas画布，用于绘制截取到的图片

第三步：将绘制好的图片转成base64格式

完整示例代码

JS 截取视频某一帧图片实现视频截图相关推荐

最新文章

热门文章

JS 截取视频某一帧图片 实现视频截图

第一步：创建video用于存放需要截取的视频文件

第二步：创建canvas画布，用于绘制截取到的图片

第三步：将绘制好的图片转成base64格式

完整示例代码

JS 截取视频某一帧图片 实现视频截图相关推荐

最新文章

热门文章

JS 截取视频某一帧图片实现视频截图

JS 截取视频某一帧图片实现视频截图相关推荐