在我的应用程序中,我编写了一段代码,允许用户使用连接到计算机的相机拍照。
执行:
我使用了网络摄像头,它显示视频元素,来源是摄像头:
function onSuccess (stream) {
this.video.srcObject = stream;
}
navigator.getUserMedia({video: true}, onSuccess, onFailure)
Run Code Online (Sandbox Code Playgroud)
当用户单击按钮时,我从视频创建快照:
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");
}
Run Code Online (Sandbox Code Playgroud)
现在,我需要放大相机并在中心周围裁剪视频,因为我想删除照片周围的背景。我不想使用 CSS 来实现这个,因为我也想保存裁剪和缩放的图片。我希望在视频视图中以及在缩放快照时进行缩放。
相机本身没有变焦选项。
是否有在视频流中缩放和裁剪的选项?