HTML5 相机拉伸图片

Question

我正在使用 HTML5 相机拍照。我注意到在拍摄图片后，尽管我对视频和 canvas.

应用了相同的宽度和高度，但最终图像的宽度和高度被拉伸了

请参考这个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

您的代码具有视频和 canvas 元素的宽度和高度的硬编码值。

避免在两个方向上都设置绝对尺寸，因为视频元素的尺寸可能会有所不同。您可以仅使用宽度或仅使用高度来设置大小，或者使用 CSS style/rule.

对于canvas，您需要根据视频元素的实际大小来设置大小。为此，请使用视频元素属性：

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

Updated fiddle

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

HTML5 相机拉伸图片

HTML5 camera stretches the picture

html

javascript

html5-video

html5-canvas