canvas做视频截图,怎么保证图片和video播放窗口尽量一样大。

我要实现的是图片不能变形,因为需求对这个截的图片要求很高,所以图片必须和视频画面一样比例。

原因分析:canvas画图利用drawImage实现,但是drawImage这个api的参数比较坑人的就是当绘制的是,是视频画面时,是根据视频的实际帧宽高来绘制的,但是每个视频的实际帧宽高不一样,但是播放视频的video标签窗口是固定大小,所以利用等比例缩放公式计算出截的图片大小时,导致有些视频截的图片大小远远小于video标签的播放窗口

阅读 5.9k
1 个回答

你可以这样试试:

<div class="wrapper">
    <div class="video-box">
        <video id="video"></video>
    </div>
</div>

.wrapper{
    position: relative;
    width: 600px;
    height: 480px;
}
.video-box{
    position: absolute;
    width: 100%;
    left : 0%;
    top: 50%;
    transform: translate(0%,-50%);
    background: #000;
}
#video{
    position: relative;
    display: block;
    max-width: 100%;
    height: auto;
}

var src= "1.mp4",
    video = document.getElementById("video");

video.ondurationchange = function(){
    alert(video.width,video.height); //这里应该就是视频等比缩放后的实际帧宽高了
};
  
video.src = src;
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题