如何正确使用HTML5 input file capture属性拍摄自拍照？安卓Chrome问题求助

问题1：默认调用后置摄像头而非前置 #

原生<input capture="user">的行为在安卓Chrome（尤其是Pixel6机型）上存在兼容性偏差，浏览器并未严格遵循capture="user"调用前置摄像头的规范。推荐直接使用MediaDevices API自定义拍照流程，绕过原生input的限制：

<!-- 自定义拍照界面 -->
<video id="cameraVideo" autoplay playsinline style="width: 100%; max-width: 400px;"></video>
<button id="captureBtn">拍摄头像</button>
<input type="file" id="avatarUpload" style="display: none;">

<script>
async function initFrontCamera() {
  try {
    // 明确指定调用前置摄像头
    const stream = await navigator.mediaDevices.getUserMedia({
      video: { facingMode: 'user' }
    });
    const video = document.getElementById('cameraVideo');
    video.srcObject = stream;
  } catch (err) {
    console.error('无法调用前置摄像头:', err);
  }
}

document.getElementById('captureBtn').addEventListener('click', () => {
  const video = document.getElementById('cameraVideo');
  const canvas = document.createElement('canvas');
  canvas.width = video.videoWidth;
  canvas.height = video.videoHeight;
  const ctx = canvas.getContext('2d');
  
  // 绘制当前视频帧到画布
  ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
  
  // 将画布转为blob，模拟文件上传
  canvas.toBlob((blob) => {
    const file = new File([blob], 'avatar.jpg', { type: 'image/jpeg' });
    const input = document.getElementById('avatarUpload');
    // 创建DataTransfer模拟文件选择
    const dataTransfer = new DataTransfer();
    dataTransfer.items.add(file);
    input.files = dataTransfer.files;
    
    // 触发input的change事件，执行后续上传逻辑
    input.dispatchEvent(new Event('change'));
    
    // 关闭摄像头流
    video.srcObject.getTracks().forEach(track => track.stop());
  }, 'image/jpeg');
});

// 页面加载时初始化前置摄像头
window.addEventListener('load', initFrontCamera);
</script>

这种方式完全由代码控制摄像头选择，避免了原生input的兼容性问题。

问题2：前置拍摄照片90°旋转异常 #

这个问题源于照片的EXIF方向标记——前置摄像头拍摄的照片会在EXIF中记录旋转信息，但Chrome在读取文件时不会自动校正这个方向。需要手动读取EXIF的Orientation值，再通过Canvas旋转图像：

function fixImageOrientation(file, callback) {
  const reader = new FileReader();
  reader.onload = function(e) {
    const img = new Image();
    img.onload = function() {
      // 获取EXIF Orientation
      getExifOrientation(img, (orientation) => {
        const canvas = document.createElement('canvas');
        const ctx = canvas.getContext('2d');
        
        // 根据Orientation值调整画布和绘制方式
        switch(orientation) {
          case 3: // 旋转180°
            canvas.width = img.width;
            canvas.height = img.height;
            ctx.rotate(Math.PI);
            ctx.drawImage(img, -img.width, -img.height);
            break;
          case 6: // 顺时针旋转90°
            canvas.width = img.height;
            canvas.height = img.width;
            ctx.rotate(Math.PI / 2);
            ctx.drawImage(img, 0, -img.height);
            break;
          case 8: // 逆时针旋转90°
            canvas.width = img.height;
            canvas.height = img.width;
            ctx.rotate(-Math.PI / 2);
            ctx.drawImage(img, -img.width, 0);
            break;
          default: // 正常方向
            canvas.width = img.width;
            canvas.height = img.height;
            ctx.drawImage(img, 0, 0);
        }
        
        // 导出校正后的图像
        canvas.toBlob((blob) => {
          callback(new File([blob], file.name, { type: file.type }));
        }, file.type);
      });
    };
    img.src = e.target.result;
  };
  reader.readAsDataURL(file);
}

// 读取EXIF Orientation的工具函数
function getExifOrientation(img, callback) {
  const imgObj = img;
  if (!imgObj.src) return callback(1);
  
  const xhr = new XMLHttpRequest();
  xhr.open('GET', imgObj.src, true);
  xhr.responseType = 'arraybuffer';
  xhr.onload = function() {
    const buffer = new Uint8Array(xhr.response);
    let orientation = 1;
    let offset = 0;
    let length = buffer.length;
    
    // 查找EXIF标记
    while (offset + 3 < length) {
      if (buffer[offset] === 0xFF && buffer[offset + 1] === 0xE1) {
        const exifLength = (buffer[offset + 2] << 8) | buffer[offset + 3];
        offset += 4;
        length = offset + exifLength;
        while (offset + 12 < length) {
          if (buffer[offset] === 0x4F && buffer[offset + 1] === 0x72 && 
              buffer[offset + 2] === 0x69 && buffer[offset + 3] === 0x65 &&
              buffer[offset + 4] === 0x6E && buffer[offset + 5] === 0x74 &&
              buffer[offset + 6] === 0x61 && buffer[offset + 7] === 0x74 &&
              buffer[offset + 8] === 0x69 && buffer[offset + 9] === 0x6F &&
              buffer[offset + 10] === 0x6E && buffer[offset + 11] === 0x00) {
            offset += 12;
            orientation = buffer[offset + 1];
            break;
          }
          offset += 2;
        }
        break;
      }
      offset++;
    }
    callback(orientation);
  };
  xhr.send();
}

// 使用示例：在input change事件中校正图像
document.getElementById('avatarUpload').addEventListener('change', function(e) {
  const file = e.target.files[0];
  if (file && file.type.startsWith('image/')) {
    fixImageOrientation(file, (fixedFile) => {
      // fixedFile就是校正后的文件，可用于上传
      console.log('校正后的文件:', fixedFile);
    });
  }
});

这段代码会读取照片的EXIF方向信息，然后在Canvas上对图像进行对应旋转，最终输出方向正确的图像文件。

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