HTML5視頻攝像頭匹配分辨率

我正在嘗試使用攝像頭拍攝快照。我已經覆蓋了一個矩形，這將是照片拍攝時的裁剪區域。拍攝照片時，拍攝的圖像會放大。如何使圖像與矩形內的區域相同？ https://jsfiddle.net/fzrLvbwf/9/HTML5視頻攝像頭匹配分辨率

var timer = null; 
var timeto = 3; // time in seconds to capture 
var video = document.getElementById('videoElement'); 

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

function videoError(e) { 

} 

function init() { 
    setUpCamera(); 

    // draw crop area box 
    var c = document.getElementById("rectElement"); 
    var ctx = c.getContext("2d"); 
    c.width = 480; 
    c.height = 360; 
    ctx.lineWidth = "4"; 
    ctx.strokeStyle = "red"; 
    ctx.rect(120, 50, 240, 260); 
    ctx.stroke(); 

    document.getElementById('btnPhoto').onclick = function() { 

    var video = document.getElementById("videoElement"); 
    var canvas = document.getElementById('snapshot-canvas'); 
    var ctx = canvas.getContext('2d'); 
    var printImg = document.getElementById('print-img'); 

    canvas.width = 240; 
    canvas.height = 260; 

    // transform the canvas so the image matches the video horitontal flipped image 
    ctx.translate(canvas.width, 0); 
    ctx.scale(-1, 1); 

    var x = (video.videoWidth - canvas.width)/2; 
    var y = (video.videoHeight - canvas.height)/2; 
    //ctx.drawImage(video, x, y, canvas.width, canvas.height, 0, 0, canvas.width, canvas.height); 
    ctx.drawImage(video, 120, 50, 240, 260, 0, 0, 240, 260); 

    var dataUrl = canvas.toDataURL('image/jpeg'); 
    printImg.src = dataUrl; 

    } 
} 

function doPhoto() { 

} 

function setUpCamera() { 
    navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia || navigator.oGetUserMedia; 

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

    } 
} 

init();

來源

2016-11-17 Graham Barlow

您使用集會舊的實現膠的，你應該使用官方的[適配器.js]（https://github.com/webrtc/adapter）polyfill。 – Kaiido

我發現視頻是640×480，所以我需要找到比

var rx = (video.videoWidth/videoContainer.clientWidth); 
var ry = (video.videoHeight/videoContainer.clientHeight); 

ctx.drawImage(video, 120 * rx, 50 * ry, 240 * rx, 260 * ry, 0, 0, 240, 260);

https://jsfiddle.net/fzrLvbwf/11/

來源

2016-11-17 21:31:16

HTML5視頻攝像頭匹配分辨率

回答

相關問題