我尝试了什么：

Question

在画布上渲染视频元素时，我无法按比例缩放视频帧。

我尝试了什么：

我读了How to proportionally resize an image in canvas?的选定答案，但它对我不起作用。我正在渲染HTML5视频帧而不是图像。这可能看似不寻常，所以在此解释：video + canvas = magic

我对调整相关问题的答案的问题可能是：

可能视频尺寸与图像的工作方式不同。
也许我错误地将用于该特定情况的答案转换为我的，因为它在多个地方使用混乱的静态测量（＆＃39; 300＆＃39;），而没有真正解释它们。

到目前为止我有什么

现在，我的播放器正常工作，将视频装入其中，但它会延伸到合适的位置。

context.drawImage(videoPlayer, 0, 0, canvasPlayer.width, canvasPlayer.height); 
//canvasPlayer -> HTML5 canvas, videoPlayer -> HTML5 video element

我想（分别）知道：

如何垂直填充高度，保持比例。
如何水平填充宽度，保持比例。

我该怎么做？

Answer 1

这是一种将视频按比例绘制到画布中的方法（保持aspectRatio）：

// var c = canvasElement, v=videoElement;
// fill vertically  
var vRatio = (c.height / v.videoHeight) * v.videoWidth;
ctx.drawImage(v, 0,0, vRatio, c.height);

// fill horizontally  
var hRatio = (c.width / v.videoWidth) * v.videoHeight;
ctx.drawImage(v, 0,0, c.width, hRatio);

＆＃13;

function draw(){

  // fill vertically
  var vratio = (c.height / v.videoHeight) * v.videoWidth;
  ctx.drawImage(v, 0,0, vratio, c.height);
  
  // fill horizontally  
  var hratio = (c.width / v.videoWidth) * v.videoHeight;
  ctx1.drawImage(v, 0,0, c1.width, hratio);  
  
  requestAnimationFrame(draw);
}


var c=document.createElement('canvas');
c.width = 640;
c.height= 480;
var ctx = c.getContext('2d')

var c1 = c.cloneNode(true);
var ctx1 = c1.getContext('2d')

var v = document.createElement('video');
v.controls=true;

document.body.appendChild(document.createTextNode('fill vertical\n'));
document.body.appendChild(c);
document.body.appendChild(document.createTextNode('fill horizontal\n'));
document.body.appendChild(c1);
document.body.appendChild(document.createTextNode('original'));
document.body.appendChild(v);

var anim;
v.onplaying = function(){
	anim = requestAnimationFrame(draw);
  };
v.onpause= function(){
	cancelAnimationFrame(anim);
  };
	
v.onloadedmetadata = function(){v.play();};
v.src = 'http://media.w3.org/2010/05/sintel/trailer.mp4';
var inputs = document.querySelectorAll('input');
inputs[0].addEventListener('change', inpHandler);
inputs[1].addEventListener('change', inpHandler);
function inpHandler(){
	c[this.name]=this.value;
	c1[this.name]=this.value;
	v.currentTime=0;
	v.play();
}

＆＃13;

canvas{border:solid 1px;}
canvas,video{ display:block;}

＆＃13;

<label for="width">width</label>
<input name="width" type="number" value="640"/>
<label for="height">height</label>
<input name="height" type="number" value="480"/></br>

＆＃13;

Answer 2

我为你做了一个例子，看看吧！

代码笔：http://codepen.io/cstony0917/pen/BNvxZP?editors=101

var v = document.getElementById("video1");
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var i;

var video_width = v.offsetWidth;
var video_height = v.offsetHeight;

var ratio = video_width / video_height;

var target_width; 
var target_height;
var y_of_video = 0;
var x_of_video = 0

if ( video_width > video_height ){
  target_width = c.width;
  target_height = c.width / ratio;  
  y_of_video = (c.height - target_height) / 2 ;
}else{
  target_width = c.height;
  target_height = c.height * ratio;

  x_of_video = (c.width - target_width) / 2 ;
}


v.addEventListener("play", function() {
  i = window.setInterval(function() {
    ctx.drawImage(v, x_of_video, y_of_video, target_width, target_height);
  },20);
}, false);

v.addEventListener("pause", function() {window.clearInterval(i);}, false);
v.addEventListener("ended", function() {clearInterval(i);}, false);

如何按比例调整画布中的视频大小？

我尝试了什么：

到目前为止我有什么

2 个答案: