Javascript 在移动设备上拍摄图像后，预览就不那么精确了

这个问题可以在附件中看到。捕获区域和捕获的图像没有那么精确。。。

下面是拍摄快照的代码

var takeSnapshot = function () {
    const deviceWidth = $(window).width();
    let widthForSmallDevice = 270;
    let heightForSmallDevice = 202.5;
    if (deviceWidth <= 419 && deviceWidth >= 340) {
        widthForSmallDevice = 310;
        heightForSmallDevice = 220;
    } else if (deviceWidth <= 499 && deviceWidth >= 420) {
        widthForSmallDevice = 380;
        heightForSmallDevice = 290;
    } else if (deviceWidth >= 500) {
        widthForSmallDevice = 400;
        heightForSmallDevice = 300;
    }
    if ($('#dest').is(':hidden')) {
        canvas.width = videoElement[0].videoWidth;
        canvas.height = videoElement[0].videoHeight;
        destCanvas.width = widthForSmallDevice;
        destCanvas.height = heightForSmallDevice;
        canvas.getContext('2d').drawImage(videoElement[0], 0, 0, widthForSmallDevice, heightForSmallDevice);
        destCtx.drawImage(canvas, 0, 0, canvas.width, canvas.height);
        destCtx.canvas.style.display = 'inline-block';
        $('#frontImageCapturedLable').show();
        $('#backImageClick').prop('disabled', false);
        $('#captureArea').hide();
        $('#backVideo').trigger('play');
        $('#backImageCameraSelect').show();
        $('#confirmationDiv').show();
    } else {
        canvas1.width = backImageVideoElement[0].videoWidth;
        canvas1.height = backImageVideoElement[0].videoHeight;
        backCanvas.width = widthForSmallDevice;
        backCanvas.height = heightForSmallDevice;
        canvas1.getContext('2d').drawImage(backImageVideoElement[0], 0, 0, widthForSmallDevice, heightForSmallDevice);
        backImage.drawImage(canvas1, 0, 0, canvas1.width, canvas1.height);
        backImage.canvas.style.display = 'inline-block';
        $('#backImageCapturedLable').show();
        $('#backImageCaptureArea').hide();
    }
    if ($('#dest').is(':visible') && $('#backImage').is(':visible')) {
        $('#frontImageResetButton').show();
        $('#backImageResetButton').show();
    }
};

var takeSnapshot=函数（）{
const deviceWidth=$（window.width（）；
设装置的宽度=270；
设装置高度为202.5；
如果（设备宽度=340）{
装置的宽度=310；
小型设备的高度=220；
}否则如果（设备宽度=420）{
装置宽度=380；
小型设备的高度=290；
}否则如果（设备宽度>=500）{
装置宽度=400；
小型设备的高度=300；
}
如果（$（'#dest'）。是（':hidden'））{
canvas.width=videoElement[0].videoWidth；
canvas.height=videoElement[0].videoHeight；
destCanvas.width=小型设备的宽度；
destCanvas.height=小型设备的高度；
canvas.getContext（'2d'）.drawImage（videoElement[0]，0，0，widthForSmallDevice，heightForSmallDevice）；
destCtx.drawImage（canvas，0，0，canvas.width，canvas.height）；
destCtx.canvas.style.display='inline block'；
$（“#frontImageCapturedLable”）.show（）；
$（'#backImageClick'）.prop（'disabled'，false）；
$（“#captureArea”）.hide（）；
$（'#backVideo'）。触发器（'play'）；
$（'#backImageCameraSelect'）.show（）；
$（'#confirmationDiv'）.show（）；
}否则{
canvas1.width=backImageVideoElement[0]。videoWidth；
canvas1.height=backImageVideoElement[0]。videoHeight；
backCanvas.width=设备的宽度；
backCanvas.height=小型设备的高度；
canvas1.getContext（'2d'）.drawImage（backImageVideoElement[0]，0，0，widthForSmallDevice，heightForSmallDevice）；
backImage.drawImage（canvas1，0，0，canvas1.width，canvas1.height）；
backImage.canvas.style.display='inline block'；
$（'#backImageCapturedLable'）.show（）；
$（“#backImageCaptureArea”）.hide（）；
}
如果（$（'dest'）是（'：可见'）&&（'backImage'）。是（'：可见'））{
$（“#frontImageResetButton”）.show（）；
$（“#backImageResetButton”）.show（）；
}
};

---

有谁能建议告诉mw上面的代码有什么错误，我如何才能解决这个问题。提前谢谢。

你能更准确地解释一下“不是那么准确”吗？我从两个不同的角度（不同的视角）看到两张不同的照片。。如果我们不知道你期望他们做什么，就很难知道什么是准确的或不准确的。输入第一个图像。我正在打开一个视频源并捕获图像，当单击“拍摄快照”按钮时，我们会得到第一个视频源输出的第二个图像。这是否足够或者我需要更精确？第一个是实时视频，第二个是快照，您确定在捕获快照后没有移动设备吗？如果有类似裁剪的问题，很难用你的例子来说明，因为观点明显改变了（不同的观点）。所以我仍然不确定到底是什么问题。是的，我确信在拍摄完快照后，我无法移动相机。好的，透视图的明显变化可能只是因为垂直比例的变化。您有没有办法控制哪一个是正确的，是实时预览还是快照？（您可以尝试打开摄像头应用程序并进行比较，看看哪一个是好的）