如何按比例调整画布中的视频大小？ [英] How do I proportionally resize a video in canvas?

问题描述

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

我尝试过的：

我读取了如何在canvas中按比例调整图像大小？但它不适合我。我正在呈现HTML5视频帧而不是图像。这可能看起来不寻常，因此这里解释： video + canvas = magic

我对适应相关问题的答案的问题可能是：

• 也许视频


• 也许我不正确地将用于该特定情况的答案转换为我的答案，因为它在多个地方使用混乱的静态测量（'300'），他们。

我到目前为止

拟合视频到它，但它伸展到适合。

  context.drawImage（videoPlayer，0，0，canvasPlayer.width，canvasPlayer.height）; 
 // canvasPlayer  - > HTML5 canvas，videoPlayer  - > HTML5视频元素
  

我想分别知道：

• 如何填充垂直高度，

我该如何做？ b $ b

解决方案

我不确定我是否理解正确，但这里是一个方法来将视频按比例绘制在画布上（保持aspectRatio）：

  // var c = canvasElement，v = videoElement; 
 //垂直填充
 var vRatio =（v.videoWidth> c.width）？（c.height / v.videoHeight）* v.videoWidth：（c.height / v.videoHeight）* v .videoWidth; 
 ctx.drawImage（v，0,0，vRatio，c.height）; 
 
 //水平填充
 var hRatio =（v.videoWidth> c.width）？（c.width / v.videoWidth）* v.videoHeight：（c.width / v。 videoWidth）* v.videoHeight; 
 ctx.drawImage（v，0,0，c.width，hRatio）; 
  

  function draw vratio =（v.videoWidth> c.width）？（c.height / v.videoHeight）* v.videoWidth：（c.height / v.videoHeight）* v.videoWidth; ctx.drawImage（v，0,0，vratio，c.height）; // fill horizo​​ntally var hratio =（v.videoWidth> c.width）？（c.width / v.videoWidth）* v.videoHeight：（c.width / v.videoWidth）* v.videoHeight; ctx1.drawImage（v，0,0，c1.width，hratio）; request.createElement（'canvas'）; c.width = 640; c.height = 480; var ctx = c.getContext（'2d'）var c1 = c.cloneNode ; var ctx1 = c1.getContext（'2d'）var v = document.createElement（'video'）; v.controls = true; document.body.appendChild（document.createTextNode（'fill vertical\\\
'））; document.body.appendChild（c）; document.body.appendChild（document.createTextNode（'fill horizo​​ntal\\\
'））; document.body.appendChild（c1）; document.body.appendChild（document.createTextNode '））; 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（'输入[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< / label>< input name =width< / label>< input name =widthtype =numbervalue =640/> heighttype =numbervalue =480/>< / br>  

b

I'm having trouble proportionally scaling the video frame when rendering a video element on canvas.

What I've tried:

I read the selected answer to How to proportionally resize an image in canvas? but it did not work for me. I'm rendering an HTML5 video frame rather than an image. This might seem unusual, so here it is explained: video + canvas = magic

My problem with adapting the answer to that related question might have been:

• Maybe the video size works differently than an image.
• maybe I incorrectly converted the answer used for that specific situation to mine, since it uses confusing static measurements ('300') in multiple places, without really explaining them.

What I have so far

Right now, my player works, fitting the video to it, but it stretches to fit.

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

I'd like to know (respectively):

• how to fill the height vertically, remaining proportional.

• how to fill the width horizontally, remaining proportional.

How can I do this?

解决方案

I'm not sure I did understood correctly, but here is a way to get the video drawn proportionally into the canvas (keeping the aspectRatio):

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

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

function draw(){

  // fill vertically
  var vratio =(v.videoWidth>c.width)?(c.height/v.videoHeight)*v.videoWidth:(c.height/v.videoHeight)*v.videoWidth;
  ctx.drawImage(v, 0,0, vratio, c.height);
  
  // fill horizontally  
  var hratio =(v.videoWidth>c.width)?(c.width/v.videoWidth)*v.videoHeight:(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>

这篇关于如何按比例调整画布中的视频大小？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！