Android Chrome中500KB以内图片上传预览错误问题求助

一、核心问题排查 #

这类问题通常由以下几个原因导致：

• 低版本Android WebView对createObjectURL生成的Blob URL回收机制异常
• FileReader异步读取未完成就提前给img赋值src
• 图片自带的EXIF方向信息未被WebView正确解析
• MIME类型识别错误，导致img无法正常渲染

二、针对性解决方案 #

1. 修正FileReader的异步处理逻辑 #

必须等待FileReader读取完成后再赋值src，避免因异步未完成导致的无效数据：

const input = document.querySelector('input[type="file"]');
input.addEventListener('change', (e) => {
  const file = e.target.files[0];
  if (!file || file.size > 500 * 1024) return;

  const reader = new FileReader();
  // 读取完成后再赋值
  reader.onload = function(event) {
    const img = document.querySelector('img');
    img.src = event.target.result;
    // 添加错误兜底
    img.onerror = () => console.error('图片加载失败，尝试重新读取');
  };
  reader.onerror = () => console.error('FileReader读取文件失败');
  // 选择读取方式：Base64
  reader.readAsDataURL(file);
});

2. 规避createObjectURL的兼容性问题 #

低版本Android WebView可能会提前回收Blob URL，建议直接将Blob转为Base64使用：

// Blob转Base64工具函数
function blobToBase64(blob) {
  return new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.onload = () => resolve(reader.result);
    reader.onerror = reject;
    reader.readAsDataURL(blob);
  });
}

// 使用示例
input.addEventListener('change', async (e) => {
  const file = e.target.files[0];
  if (!file || file.size > 500 * 1024) return;
  
  try {
    const base64Str = await blobToBase64(file);
    const img = document.querySelector('img');
    img.src = base64Str;
  } catch (err) {
    console.error('转换失败', err);
  }
});

若坚持使用createObjectURL，需避免提前释放URL：

const blobUrl = URL.createObjectURL(file);
const img = document.createElement('img');
img.src = blobUrl;
// 加载完成后再考虑释放，避免低版本WebView提前回收
img.onload = () => {
  // URL.revokeObjectURL(blobUrl);
};
document.body.appendChild(img);

3. 处理图片EXIF方向问题 #

Android相机拍摄的图片常带有EXIF方向标记，WebView可能不会自动校正，导致显示旋转/拉伸。可通过Canvas手动校正：

function correctImageOrientation(file) {
  return new Promise((resolve, reject) => {
    const img = new Image();
    img.src = URL.createObjectURL(file);
    img.onload = () => {
      // 这里需要读取图片的EXIF Orientation值（可通过解析文件头或轻量库实现）
      // 示例假设Orientation为6（顺时针旋转90度）
      const orientation = 6;
      const canvas = document.createElement('canvas');
      const ctx = canvas.getContext('2d');

      if (orientation === 6) {
        canvas.width = img.height;
        canvas.height = img.width;
        ctx.rotate(Math.PI / 2);
        ctx.drawImage(img, 0, -img.height);
      } else {
        canvas.width = img.width;
        canvas.height = img.height;
        ctx.drawImage(img, 0, 0);
      }

      canvas.toBlob(blob => {
        resolve(blob);
        URL.revokeObjectURL(img.src);
      }, file.type);
    };
    img.onerror = reject;
  });
}

// 使用示例
correctImageOrientation(file).then(blob => {
  const img = document.querySelector('img');
  img.src = URL.createObjectURL(blob);
});

4. 强制指定图片MIME类型 #

部分Android WebView对未知MIME类型的图片解析失败，手动指定有效类型：

const file = e.target.files[0];
const validMime = file.type.startsWith('image/') ? file.type : 'image/jpeg';
const fixedBlob = new Blob([file], { type: validMime });
const img = document.querySelector('img');
img.src = URL.createObjectURL(fixedBlob);

三、验证建议 #

• 覆盖目标Android版本（Android 6~13）的WebView测试
• 测试相机拍摄、图库选择的不同格式图片（JPG/PNG/WebP）
• 验证极端场景：刚好500KB的图片、纯色小图等

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