Vue.js弹窗内用HTML5调用相机拍照时Mobile Chrome崩溃问题

针对你遇到的模态弹窗内使用capture="camera"拍照后弹窗关闭或页面崩溃的问题，以下是结合Mobile Chrome兼容性特性和Vue响应式机制的修复方案：

核心原因分析 #

• Mobile Chrome在相机捕获完成后，会触发页面焦点重置或隐式DOM重绘，导致模态弹窗的状态丢失
• 相机拍摄的大尺寸照片同步压缩会阻塞主线程，引发页面崩溃
• capture="camera"的原生行为与Vue响应式状态更新存在冲突

具体修复方案 #

1. 保存并强制恢复弹窗状态 #

相机捕获后页面状态可能被重置，提前保存弹窗状态，处理完成后强制恢复：

<!-- 给相机按钮添加状态保存触发 -->
<label :for="'camera-' + type.value" @click="saveModalStatus">
  <span class="material-symbols-outlined" style="pointer-events: none;">photo_camera</span>
</label>

// 假设你的弹窗由isModalOpen这个响应式状态控制
const isModalOpen = ref(true);

const saveModalStatus = () => {
  sessionStorage.setItem('modalOpen', JSON.stringify(isModalOpen.value));
};

// 修改onPhotoChange，处理完成后恢复弹窗
const onPhotoChange = async (event, photoType) => {
  try {
    const file = event.target.files[0];
    if (file) {
      try {
        const resizedFile = await resizeImage(file);
        readingData.photos[photoType] = resizedFile;

        if (photoPreviews[photoType]?.startsWith('blob:')) {
          URL.revokeObjectURL(photoPreviews[photoType]);
        }

        photoPreviews[photoType] = URL.createObjectURL(resizedFile);
        photoDirtyFlags[photoType] = true;

        // 强制恢复弹窗状态
        const savedState = JSON.parse(sessionStorage.getItem('modalOpen'));
        if (savedState) isModalOpen.value = true;
      } catch (error) {
        console.error("图片压缩错误:", error);
      }
    }
  } catch (error) {
    alert(error);
  } finally {
    event.target.value = '';
    sessionStorage.removeItem('modalOpen');
  }
};

2. 优化图片压缩逻辑，避免主线程阻塞 #

相机照片尺寸过大，同步压缩会卡死主线程，调整压缩参数或改用异步处理：

// 调整resizeImage，优先降低分辨率并使用较低质量压缩
async function resizeImage(file, maxWidth = 1200, maxHeight = 1200) {
  return new Promise((resolve, reject) => {
    const img = new Image();
    img.onload = () => {
      const canvas = document.createElement('canvas');
      let width = img.width;
      let height = img.height;

      // 按比例缩小
      if (width > maxWidth) {
        height = (height * maxWidth) / width;
        width = maxWidth;
      }
      if (height > maxHeight) {
        width = (width * maxHeight) / height;
        height = maxHeight;
      }

      canvas.width = width;
      canvas.height = height;
      const ctx = canvas.getContext('2d');
      ctx.drawImage(img, 0, 0, width, height);

      // 用0.7的质量生成JPEG，减少文件体积
      canvas.toBlob(blob => {
        resolve(new File([blob], file.name, { type: 'image/jpeg' }));
      }, 'image/jpeg', 0.7);
    };
    img.onerror = reject;
    img.src = URL.createObjectURL(file);
  });
}

3. 替换capture="camera"为兼容写法 #

Mobile Chrome对capture属性存在兼容性bug，改用capture="environment"指定后置相机，或省略让浏览器自行选择：

<input 
  type="file" 
  :id="'camera-' + type.value" 
  accept="image/*"
  capture="environment" <!-- 明确指定后置相机 -->
  style="display: none;" 
  @change="onPhotoChange($event, type.value)"
/>

4. 延迟响应式状态更新 #

使用nextTick等待相机捕获后的DOM状态稳定，再更新Vue状态：

const onPhotoChange = async (event, photoType) => {
  try {
    const file = event.target.files[0];
    if (file) {
      try {
        const resizedFile = await resizeImage(file);
        
        // 等待DOM状态稳定后再更新
        await nextTick();
        
        readingData.photos[photoType] = resizedFile;

        if (photoPreviews[photoType]?.startsWith('blob:')) {
          URL.revokeObjectURL(photoPreviews[photoType]);
        }

        photoPreviews[photoType] = URL.createObjectURL(resizedFile);
        photoDirtyFlags[photoType] = true;
      } catch (error) {
        console.error("图片压缩错误:", error);
      }
    }
  } catch (error) {
    alert(error);
  } finally {
    event.target.value = '';
  }
};

额外排查点 #

• 检查模态弹窗是否依赖focus状态，相机捕获后焦点丢失可能导致弹窗关闭
• 确保readingData是用ref或reactive声明的响应式对象，非响应式对象的更新可能触发意外重绘
• 测试时关闭Chrome的"数据保护模式"或"节省流量"功能，这类模式可能干扰图片处理逻辑

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