Обрезать видео на холсте

Я получаю 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; 
}

Здесь машинописи:

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); 
}

источник

2016-11-17 Get Off My Lawn

Вы пробовали абсолютно позиционировать элементы на вершине eachother? –

Это будет просто перемещать элементы вокруг, что не повлияет на то, где оно нарисовано на холсте. –

Ваша проблема, похоже, вызвана тем фактом, что элемент video сохраняет пропорции видео, а на холсте нет. Также помните, что ctx.drawImage занимает до восьми позиционных и размера аргументов:

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

Я сделал некоторые испытания, и нашел, что это работает очень хорошо, но ваш пробег может изменяться: .drawImage(video,80,0,480,500,0,0,500,520);

I сделал jsFiddle with these numbers, проверьте, не работает ли он для вас.

W3Schools имеет много документации о том, как они работают, я предлагаю прочитать, что: http://www.w3schools.com/tags/canvas_drawimage.asp

Вы могли бы, вероятно, использовать видео-х videoWidth и videoHeight атрибуты для расчета, какие номера вам нужно в drawImage для различных пропорций исходного видео

источник

2016-11-17 20:08:29

Я буду растягивать конечный результат по ширине экрана (это будет завершено в Android Chrome после завершения). Я предполагаю, что это все равно будет работать ... –

Это должно сработать, но вам нужно немного подкорректировать числа, но вы должны сделать этот процесс автоматически, используя ширину и высоту как контейнера, так и источника видео для расчета нужных вам номеров –

Обрезать видео на холсте

ответ

Смежные вопросы