如何解决Webcam生成的Data URL图片尺寸过小问题？

你遇到的问题根源是canvas元素默认尺寸为300x150，且未根据视频流的实际分辨率调整canvas大小。以下是具体优化方案：

核心优化步骤 #

• 视频流加载完成后，获取视频的实际分辨率（video.videoWidth和video.videoHeight），将canvas的宽高同步设置为对应值
• 确保drawImage使用正确的尺寸绘制，避免拉伸或压缩画面

修改后的完整代码 #

var video = document.querySelector("#videoElement");
var photo_button = document.querySelector("#photo_button");
const canvas = document.createElement('canvas');

if (navigator.mediaDevices.getUserMedia) {
  navigator.mediaDevices.getUserMedia({ video: true })
    .then(function (stream) {
      video.srcObject = stream;
      // 监听视频元数据加载完成事件，获取实际分辨率
      video.onloadedmetadata = function() {
        // 将canvas宽高设置为视频的真实分辨率
        canvas.width = video.videoWidth;
        canvas.height = video.videoHeight;
      };
    })
    .catch(function (error) {
      console.log("获取摄像头流失败：", error);
    });
}

photo_button.addEventListener('click', function() {
  const ctx = canvas.getContext('2d');
  // 按canvas实际尺寸绘制视频画面
  ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
  // 第二个参数可调整JPEG画质（0-1，默认0.92）
  let image_data_url = canvas.toDataURL('image/jpeg', 0.9);

  console.log(image_data_url);
});

额外优化：指定摄像头分辨率约束 #

如果需要固定获取特定分辨率的视频流，可在getUserMedia参数中明确指定，例如要求1080P：

navigator.mediaDevices.getUserMedia({ 
  video: { 
    width: { ideal: 1920 },
    height: { ideal: 1080 }
  } 
})

注：实际分辨率取决于用户设备摄像头的支持情况，ideal表示优先选择该分辨率，设备会返回最接近的可用分辨率。

内容的提问来源于stack exchange，提问作者Kurt