javascript - Beskär video på canvas

Jag får video från användarens kamera och visar den på en 1:1 kvadrat. Jag har sedan en knapp som tar en bild och ritar den på en 1:1 canvas, problemet är att den inte ritas på samma plats på canvasen. Hur kan jag uppnå detta?

Här är ett exempel som pågår:

https://jsfiddle.net/90d3ar1m/

Här är HTML:

<!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>

Här är CSS:

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

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

Här är 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 verkar bero på att video-elementet behåller videons bildförhållande, medan canvas inte gör det. Kom också ihåg att ctx.drawImage kan ta upp till åtta positionella och storleksargument:

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

Jag gjorde lite tester och upptäckte att detta fungerade ganska bra, men dina resultat kan variera: .drawImage(video,80,0,480,500,0,0,500,520);

Jag gjorde en jsFiddle med dessa nummer, kolla det för att se om det fungerar för dig.

W3Schools har bra dokumentation om hur dessa fungerar, jag föreslår att du läser det: http://www.w3schools.com/tags/canvas_drawimage.asp

Du skulle förmodligen kunna använda videons videoWidth och videoHeight attribut för att beräkna vilka siffror du behöver i drawImage för källvideor med olika bildförhållanden