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

How do I proportionally resize a video in canvas?

本文关键字：布中 的视频 调整 按比例      更新时间：2023-09-26

在画布上渲染视频元素时，我在按比例缩放视频帧时遇到了问题。

我试过了:

我读了选择的答案如何按比例调整画布中的图像?但这对我不起作用。我正在渲染HTML5视频帧而不是图像。这可能看起来不寻常，所以在这里解释一下:video + canvas = magic

我在回答相关问题时遇到的问题是:

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

目前我有什么

现在，我的播放器工作，适合视频，但它延伸到适合。

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

我想知道(分别):

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

  • 如何横向填充宽度，保持成比例

我该怎么做?

这是一个让视频按比例绘制到画布(保持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);


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>

我给你做了一个例子，看看吧!

代码笔: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);

@Tony Hsieh解决方案的一个小修复

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 * ratio;
  target_height = c.height;
  x_of_video = (c.width - target_width) / 2 ;
}
相关文章：