缩放和裁剪视频源

Question

在我的应用程序中，我编写了一段代码，允许用户使用连接到计算机的相机拍照。

执行：

我使用了网络摄像头，它显示视频元素，来源是摄像头：

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 来实现这个，因为我也想保存裁剪和缩放的图片。我希望在视频视图中以及在缩放快照时进行缩放。

相机本身没有变焦选项。

是否有在视频流中缩放和裁剪的选项？

Answer 1

context.drawImage()有可选参数来“缩放”图像（sWidth、sHeight）。要移动图像并“裁剪”，您可以设置其他参数（dx，dy）。

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

但这是JS直接缩放&裁剪的方式。如果您需要现成的 UI 来实现此类功能，您可以将您的代码与以下内容结合起来：http://deepliquid.com/projects/Jcrop/demos.php ?demo=thumbnail （我没有尝试过，只是将其放在书签）