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

Question

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

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

Answer 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;