JavaScript调用摄像头拍照后画质下降如何保留图像清晰度？

核心原因 #

你当前出现画质下降的核心原因是硬编码了400*400的绘制尺寸，强制压缩了摄像头采集的原始高分辨率视频帧，导致像素信息丢失。

解决方案 #

• 匹配canvas尺寸与摄像头原始分辨率
  不要固定绘制尺寸，读取视频流的实际输出宽高设置canvas的画布像素尺寸（注意区分画布像素尺寸和CSS展示尺寸，前者决定实际画质，后者仅控制页面展示大小）
• 避免强制拉伸压缩
  绘制时使用视频原始宽高，不做等比缩放外的强制变形，保证像素点一一对应
• 导出参数优化
  当前使用的image/png为无损导出格式，本身不会带来额外画质损失；如果后续切换为JPEG格式，需手动设置最高质量参数toDataURL('image/jpeg', 1.0)
• 采集阶段指定高分辨率
  请求摄像头权限时配置理想分辨率参数，保证采集阶段就能拿到高清晰度的视频流

修改后的代码示例 #

drawImageToCanvas(image: HTMLVideoElement) {
  // 获取摄像头输出的原始分辨率
  const originWidth = image.videoWidth;
  const originHeight = image.videoHeight;
  const canvas = this.canvas.nativeElement;
  // 调整canvas画布像素尺寸匹配原始视频
  canvas.width = originWidth;
  canvas.height = originHeight;
  // 1:1绘制无压缩
  return canvas.getContext('2d').drawImage(image, 0, 0, originWidth, originHeight);
}

takePhoto(): void {
  this.drawImageToCanvas(this.video.nativeElement);
  const imgData = this.canvas.nativeElement.toDataURL('image/png');
  this.img = imgData;
  this.DownloadFile(imgData, 'image');
}

采集阶段高分辨率配置示例（getUserMedia阶段） #

const streamConstraints = {
  video: {
    width: { ideal: 2560 }, // 可根据业务需求调整理想分辨率
    height: { ideal: 1440 },
    facingMode: 'environment' // 移动端默认后置摄像头，按需配置
  }
}
// 调用摄像头时传入配置
const stream = await navigator.mediaDevices.getUserMedia(streamConstraints);

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