javascript - Beskjær video på lerret

Jeg får video fra brukerens kamera, og viser den på en 1:1 firkant. Jeg har deretter en knapp som tar et bilde og tegner det på et 1:1 lerret, problemet er at det ikke tegnes på samme sted på lerretet. Hvordan kan jeg oppnå dette?

Her er et løpende eksempel:

https://jsfiddle.net/90d3ar1m/

Her er HTML-en:

<!doctype html>
<html>

<head>
    <title>Camera</title>
    <meta http-equiv="Content-Security-Policy" content="default-src * data: gap: https://ssl.gstatic.com 'unsafe-inline'; style-src * 'unsafe-eval'; media-src 'self' blob:">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="css/camera.css">
</head>

<body>
    <div class="container">
        <div class="camera">
            <video id="monitor" autoplay></video>
        </div>
        <canvas id="photo"></canvas>
        <input type=button value="&#x1F4F7;" onclick="snapshot()">
    </div>
    <script type="text/javascript" src="js/plugins/jquery.min.js"></script>
    <script type="text/javascript" src="js/dist/pages/camera.js"></script>
</body>

</html>

Her er CSS-en:

video {
    width: 500px;
    height: 500px;
    object-fit: cover;
    object-position: center;
}

.camera {
    width: 500px;
    height: 500px;
    overflow: hidden;
}

Her er TypeScript:

let canvas: HTMLCanvasElement;
let video: HTMLVideoElement;
$(window).on('load', async event => {
    video = <HTMLVideoElement>document.getElementById('monitor');
    canvas = <HTMLCanvasElement>document.getElementById('photo');

    video.srcObject = await navigator.mediaDevices.getUserMedia({ video: true });
    video.onloadedmetadata = () => {
        canvas.width = 500;
        canvas.height = 500;
    }

});

function snapshot() {
    canvas.getContext('2d').drawImage(video, 0, 0);
}

Svar #1

Ditt problem ser ut til å være forårsaket av at video-elementet beholder videoens sideforhold, mens lerretet ikke gjør det. Husk også at ctx.drawImage kan ta opptil åtte posisjonelle og størrelsesargumenter:

context.drawImage(img/vid,sx,sy,swidth,sheight,x,y,width,height);

Jeg gjorde noen tester, og fant ut at dette fungerer ganske bra, men resultatene kan variere: .drawImage(video,80,0,480,500,0,0,500,520);

Jeg lagde en jsFiddle med disse tallene, sjekk det ut for å se om det fungerer for deg.

W3Schools har noen flotte dokumentasjoner om hvordan dette fungerer, jeg foreslår å lese det: http://www.w3schools.com/tags/canvas_drawimage.asp

Du kan sannsynligvis bruke videoens videoWidth og videoHeight attributter for å beregne hvilke tall du trenger i drawImage for videoer med forskjellige sideforhold