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（我没有尝试过，只是将其保存在书签中）

缩放和裁剪视频源

1 个答案: