HTML5 相機拉伸圖片

Question

我正在使用 HTML5 相機拍照。 我注意到在捕獲圖片后，雖然我為視頻和畫布應用了相同的寬度和高度，但最終圖像的寬度和高度會被拉伸。

請參考這個JSFIDDLE

var video = document.querySelector("#videoElement");

navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia || navigator.oGetUserMedia;

if (navigator.getUserMedia) {       
    navigator.getUserMedia({video: true}, handleVideo, videoError);
}

function handleVideo(stream) {
    video.src = window.URL.createObjectURL(stream);
}

function videoError(e) {
    // do something
}
var v,canvas,context,w,h;
var imgtag = document.getElementById('imgtag');
var sel = document.getElementById('fileselect');

//document.addEventListener('DOMContentLoaded', function(){
    v = document.getElementById('videoElement');
    canvas = document.getElementById('canvas');
    context = canvas.getContext('2d');
    w = canvas.width;
    h = canvas.height;

//},false);

function draw(v,c,w,h) {
    if(v.paused || v.ended) return false;
    context.drawImage(v,0,0,w,h);

   var uri = canvas.toDataURL("image/png");

   imgtag.src = uri;
}

document.getElementById('save').addEventListener('click',function(e){

    draw(v,context,w,h);


});
var fr;

sel.addEventListener('change',function(e){
    var f = sel.files[0];

    fr = new FileReader();
    fr.onload = receivedText;
    fr.readAsDataURL(f);
})

function receivedText() {        
    imgtag.src = fr.result;
}

Answer 1

您的代碼具有針對視頻和畫布元素的寬度和高度的硬編碼值。

避免在兩個方向上都設置絕對大小，因為視頻元素的尺寸可能會發生變化。 您可以僅使用寬度或高度，或使用CSS樣式/規則來設置大小。

對於畫布，您需要根據視頻元素的實際大小設置大小。 為此，請使用視頻元素屬性：

 video.videoWidth;
 video.videoHeight;

您可以將刻度應用於所需的刻度，例如：

scale = 300 / v.videoWidth;

w = v.videoWidth * scale;
h = v.videoHeight * scale;

canvas.width = w;
canvas.height = h;
context.drawImage(v, 0, 0, w, h);

更新的小提琴

Answer 2

如果有人在 2021 年仍然面臨這個問題......

// init media navigator
navigator.mediaDevices.getUserMedia(constraints).then(stream => {

    // get the actual settings of video element, 
    // which includes real video width and height
    const streamSettings = stream.getVideoTracks()[0].getSettings();
    // set the constrains to canvas element
    canvasElement.width = streamSettings.width;
    canvasElement.height = streamSettings.height;
}