Камера 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); 

Updated fiddle