匹配屏幕的分辨率 - 疊加

Question

我有一個畫布，在一個div定義的視頻：

<div id="videos"> 
    <canvas id="my-canvas"></canvas> 
    <video id="remote-video" autoplay></video> 
</div> 

這裏是CSS：

#my-canvas { 
    display: block; 
    height: 100%; 
    max-height: 100%; 
    max-width: 100%; 
    object-fit: cover; 
    /* no letterboxing */ 
    opacity: 1; 
    z-index: 2; 
    position: absolute; 
    -moz-transform: rotateY(180deg); 
    -ms-transform: rotateY(180deg); 
    -o-transform: rotateY(180deg); 
    -webkit-transform: rotateY(180deg); 
    transform: rotateY(180deg); 
    transition: opacity 1s; 
    width: 100%; 
} 

#remote-video { 
    display: block; 
    height: 100%; 
    max-height: 100%; 
    max-width: 100%; 
    object-fit: cover; 
    /* no letterboxing */ 
    opacity: 0; 
    -moz-transform: rotateY(180deg); 
    -ms-transform: rotateY(180deg); 
    -o-transform: rotateY(180deg); 
    -webkit-transform: rotateY(180deg); 
    transform: rotateY(180deg); 
    transition: opacity 1s; 
    width: 100%; 
} 

當我畫在畫布中，分辨率似乎不符合視頻的分辨率。下面是JavaScript代碼：

var my_canvas = (function() { 

var options; 
var video; 
var canvas; 
var context; 
var renderTimer; 

function initVideoStream() { 
    if (options.videoElement) { 
     video = document.getElementById(options.videoElement); 
     video.setAttribute('width', options.width); 
     video.setAttribute('height', options.height); 

     initCanvas(); 
    } else { 
     options.onNotSupported(); 
    } 
} 

function initCanvas() { 
    canvas = document.createElement("canvas"); 
    canvas.setAttribute('width', options.width); 
    canvas.setAttribute('height', options.height); 

    context = canvas.getContext('2d'); 

    startCapture(); 
} 

function startCapture() { 
    renderTimer = setInterval(function() { 
     try { 
      context.drawImage(video, 0, 0, video.width, video.height); 
      options.onFrame(canvas); 
     } catch (e) { 
      // TODO 
     } 
    }, Math.round(1000/options.fps)); 
} 

function stopCapture() { 
    if (renderTimer) { 
     clearInterval(renderTimer); 
    } 

    options.onClear(); 
} 

return { 
    init: function(captureOptions) { 
     var doNothing = function(){}; 

     options = captureOptions || {}; 

     options.fps = options.fps || 30; 
     options.width = options.width || 640; 
     options.height = options.height || 480; 
     options.videoElement = options.videoElement || null; 

     options.onSuccess = options.onSuccess || doNothing; 
     options.onError = options.onError || doNothing; 
     options.onNotSupported = options.onNotSupported || doNothing; 
     options.onFrame = options.onFrame || doNothing; 
     options.onClear = options.onClear || doNothing; 

     initVideoStream(); 
    }, 

    start: startCapture, 

    stop: stopCapture 
}; 
})(); 

注：

1）options.videoElement =的document.getElementById（ '我的畫布'）;

2）我玩options.width和height的不同值。它沒有修復。

如何在畫面上完全疊加畫布？

Answer 1

這種調整大小代碼解決了這一問題：

function startCapture() { 
     window.requestAnimFrame = (function() { 
      return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function(/* function */ callback, /* DOMElement */ element) { 
       window.setTimeout(callback, 1000/options.fps); 
      }; 
     })(); 

     animate(); 
    } 

    function stopCapture() { 
     requestAnimFrame = null; 
     options.onClear(); 
    } 

    function animate() { 
     if (requestAnimFrame != null) { 
      requestAnimFrame(animate); 
      render(); 
     } 
    } 

    function render() { 
     try { 
      var video_width = video.offsetWidth; 
      var video_height = video.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 = canvas.width; 
       target_height = canvas.width/ratio; 
       y_of_video = (canvas.height - target_height)/2; 
      } else { 
       target_width = canvas.height; 
       target_height = canvas.height * ratio; 
       x_of_video = (canvas.width - target_width)/2; 
      } 
      context.drawImage(video, x_of_video, y_of_video, target_width, target_height); 
      options.onFrame(canvas); 
     } catch (e) { 
      console.log("Failed to render canvas"); 
     } 
    } 

注：解答基於350D的建議編輯。