javascript - HTML5相机拉伸(stretch)图片

Question

我正在使用 HTML5 相机拍照。我注意到，在捕获图片后，尽管我对视频和 Canvas 应用相同的宽度和高度，但最终图像的宽度和高度会被拉伸(stretch)。

请引用此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 样式/规则来设置大小。

对于 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