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

我正在使用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;
}

最佳答案

您的代码具有针对视频和画布元素的宽度和高度的硬编码值。

避免在两个方向上都设置绝对大小，因为视频元素的尺寸可能会发生变化。您可以仅使用宽度或高度，或使用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

关于javascript - HTML5相机拉伸(stretch)图片，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/28712319/