JS 截取视频某一帧图片 实现视频截图
3, 调用canvas元素中的 getContext() 方法(返回一个用于在画布上绘图的环境)。将得到的base64格式的图片地址添加到网页中,这样就完成视频截图功能了!1,定义创建一个 canvas 标签;2,指定 canvas 标签的宽高;
·
第一步:创建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`))
}
更多推荐
已为社区贡献3条内容
所有评论(0)