Увеличить и обрезать источник видео - PullRequest
Новая
       75

Увеличить и обрезать источник видео

0 голосов
/ 05 ноября 2018

В своем приложении я написал код, который позволяет пользователю делать снимки с помощью камеры, подключенной к компьютеру.

Реализация:

Я использовал веб-камеру, которая показывает элемент видео, а источником является камера: 

function onSuccess (stream) {
 this.video.srcObject = stream;
}
navigator.getUserMedia({video: true}, onSuccess, onFailure)

Когда пользователь нажимает кнопку, я создаю снимок из видео: 

function takeSnapshot (width, height, savePicture) {
      const canvas = document.createElement('canvas');
      canvas.width = width;
      canvas.height = height;
      const ctx = canvas.getContext('2d');
      ctx.drawImage(this.video, 0, 0, canvas.width, canvas.height);

      canvas.toBlob(function (blob) {
         savePicture(blob);
      }, "image/jpeg");
   }

Теперь мне нужно увеличить камеру и обрезать видео вокруг центра, так как я хочу удалить фон вокруг фотографии. Я не хочу реализовывать это с помощью CSS, так как хочу сохранить изображение обрезанным и увеличенным. Мне нужно это увеличение при просмотре видео, а также при создании снимка с увеличением.

Камера не имеет собственной функции увеличения.

Есть ли возможность масштабирования и обрезки в потоке видео?

1 Ответ

0 голосов
/ 05 ноября 2018

context.drawImage() имеет необязательные параметры для «масштабирования» изображения (sWidth, sHeight). Чтобы переместить изображение и «обрезать», вы можете установить дополнительные параметры (dx, dy).

https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/drawImage

Но это прямой способ увеличения и кадрирования от JS. Если вам нужен готовый пользовательский интерфейс для такой функциональности, вы можете объединить свой код с чем-то вроде этого: http://deepliquid.com/projects/Jcrop/demos.php?demo=thumbnail (я не пробовал, просто в закладках)

...