空白图片无法通过file.type或file.size准确识别，必须用Canvas加载后分析像素数据；因1KB PNG可能为全透明图或高质实拍图，需采样Alpha/RGB值判断视觉空白。
空白图片（即全透明、纯色、无有效像素内容的图片）无法靠 file.type 或 file.size 判断，必须加载后用 Canvas 分析像素数据。浏览器不提供“是否为空白”的原生 API，得自己采样检测。
为什么不能只看文件大小或类型
一个 1KB 的 PNG 可能是 100×100 全透明图，也可能是压缩极高的实拍图；file.type === 'image/png' 和 file.size > 0 都成立，但业务上可能拒绝这种“视觉空白”图片。常见于用户截图后裁剪留白、AI 生成图导出异常、或恶意上传占位符。
用 Canvas 读取首帧像素做基础空白检测
核心思路：用 FileReader 或 URL.createObjectURL() 加载图片 → 创建 <canvas> 绘制 → 用 ctx.getImageData() 读取像素 → 检查 Alpha 通道或 RGB 均值是否趋近阈值。
- 优先用
URL.createObjectURL(file)，比readAsDataURL内存更友好，且避免 base64 解码开销 - 务必限制画布尺寸（如
Math.min(img.width, img.height) ），否则大图会卡顿甚至 OOM - 采样策略建议：取中心区域 + 四角共 5 个点，或每 8 像素取一个点（避免遍历全部像素）
- 判断逻辑示例：
if (r === 0 && g === 0 && b === 0 && a 视为透明像素；若 95% 以上像素满足，则判定为空白
iOS Safari 和跨域图片的兼容处理
Canvas 读取像素时，若图片来自 blob: URL 或本地文件，在 iOS Safari 15+ 上可能触发 SecurityError: The canvas has been tainted by cross-origin data，导致 getImageData() 报错。
立即学习“前端免费学习笔记（深入）”；
- 解决方法：给
<img>设置crossOrigin="anonymous"，再用URL.createObjectURL()加载 —— 但仅对支持 CORS 的 blob 有效；本地 file:// 不行 - 更稳妥路径：降级为检查文件头（PNG 的 IHDR chunk、JPEG 的 SOI marker）+ 尺寸 + 平均亮度估算，不依赖 Canvas
- 可快速排除的硬规则：
file.size （2KB）且 <code>file.type.startsWith('image/')→ 直接标为高风险，提示“图片内容过简”
实际部署时容易忽略的边界
真正上线后暴露最多的问题不是算法不准，而是没覆盖场景：
- WebP 动图首帧可能非空白，但后续帧全是透明——Canvas 默认只绘第一帧，需额外解析 WebP 动画头
- HEIC/HEIF 格式在 Safari 外浏览器无法直接
drawImage，会静默失败，应先用file.type拦截或转成 JPEG/PNG 再检 - 用户连续快速选图，前一个
URL.revokeObjectURL()没执行完就进下一个检测，导致内存泄漏或DOMException: Failed to execute 'drawImage' on 'CanvasRenderingContext2D' - 检测耗时超过 300ms 就该 abort 并返回 “无法验证”，别让 UI 卡住 —— 空白检测是锦上添花，不是必过门槛
