javascript - 如何在 Canvas 中按比例调整视频大小？

Question

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

我尝试过的:

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

我在调整该相关问题的答案时遇到的问题可能是:

• 也许视频大小与图片大小不同。
• 也许我错误地将用于该特定情况的答案转换为我的答案，因为它在多个地方使用了令人困惑的静态测量值(“300”)，而没有真正解释它们。

到目前为止我有什么

现在，我的播放器正常工作，适合播放视频，但播放器会拉伸(stretch)以适合播放器。

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

我想知道(分别):

• 如何垂直填充高度，保持比例。

• 如何水平填充宽度，保持比例。

我该怎么做？

Answer 1

这是一种将视频按比例绘制到 Canvas 中的方法(保持纵横比):

// 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);

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();
}

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

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