在画布上裁剪视频

Crop video on canvas

本文关键字：裁剪 视频      更新时间：2023-09-26

我从用户的相机中获取video，并将其显示在1:1的正方形上。然后我有一个按钮，拍照并将其绘制到1:1的画布，问题是它不是绘制在画布上的同一位置。我怎样才能做到这一点呢?

下面是一个正在运行的例子:

https://jsfiddle.net/90d3ar1m/

下面是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>

下面是CSS:

video {
    width: 500px;
    height: 500px;
    object-fit: cover;
    object-position: center;
}
.camera {
    width: 500px;
    height: 500px;
    overflow: hidden;
}
下面是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);
}

你的问题似乎是由于video元素保持视频的长宽比，而画布没有。还要记住ctx。drawImage最多接受8个位置和大小参数:

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

我做了一些测试，发现这工作得很好，但你的里程可能会有所不同:.drawImage(video,80,0,480,500,0,0,500,520);

我用这些数字做了一个jsFiddle，看看它是否适合你。

W3Schools有一些关于如何工作的很好的文档，我建议阅读:http://www.w3schools.com/tags/canvas_drawimage.asp

你可以使用视频的videoWidth和videoHeight属性来计算drawImage中不同宽高比源视频需要的数字

相关文章：