缩放和裁剪视频源答案

【问题标题】：Zoom and crop video source缩放和裁剪视频源
【发布时间】：2019-04-08 19:46:42
【问题描述】：

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

实施：

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

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

相机没有自己的缩放选项。

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

【问题讨论】：

由于视频输出在canvas中，所以canvas允许你做任何事情，包括zoom和crop。

标签： javascript html webrtc webcam

【解决方案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（我没有尝试过，只是将它放在书签中）

【讨论】：