JS 截取视频某一帧图片实现视频截图-Toy模板网

这篇具有很好参考价值的文章主要介绍了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]**否则会出现如下报错：
js video截图,前端,javascript,音视频,前端

第三步：将绘制好的图片转成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`))
}