HTML5中图片方向无法自动修正，本质是浏览器加载<img>时忽略JPEG的EXIF Orientation字段；需用exif-js读取Orientation值，再通过Canvas手动旋转绘制并导出，才能真正固化正确方向。
HTML5 中图片方向无法自动修正？本质是 EXIF 信息被忽略
浏览器加载 <img> 标签时，默认**不解析或应用 JPEG 文件中的 EXIF Orientation 字段**。哪怕原图用手机横拍后旋转了 90°，保存时系统写入了 Orientation = 6，直接 <img src="photo.jpg"> 仍会按原始像素矩阵渲染——看起来就是歪的。这不是 HTML5 “不支持方向”，而是标准行为：解码图像数据 ≠ 应用元数据变换。
用 JavaScript 读取并解析 JPEG 的 EXIF Orientation
必须手动提取二进制数据里的 EXIF 段。推荐轻量方案：exif-js（注意不是 exifr 或 piexif，后者更重且需额外处理 Blob）。步骤如下：
- 通过
<input type="file">获取File对象，或用fetch()加载图片 URL 得到Blob - 传入
EXIF.getData()，它会在回调中提供this.exifdata（含Orientation字段） -
Orientation值为 1–8，常见值：1（正常）、6（顺时针90°）、3（180°）、8（逆时针90°） - ⚠️ 注意：
EXIF.getData()**只对 JPEG 有效**；PNG/WebP 无此字段，方向信息需靠其他方式（如 CSSimage-orientation: from-image）
Canvas 绘制时按 Orientation 手动旋转/翻转
拿到 Orientation 后，不能靠 CSS 旋转容器来“假装修正”——这会导致 canvas 导出、打印、截图仍为原始方向。必须在 ctx.drawImage() 前计算变换：
- 创建足够大的
<canvas>（宽高按 Orientation 调整：如Orientation=6时，目标 canvas 宽=原图高，高=原图宽） - 用
ctx.translate()和ctx.rotate()移动坐标系，再调用drawImage()绘制原始图像数据 - 示例关键逻辑：
if (orientation === 6) { ctx.translate(canvas.width, 0); ctx.rotate(0.5 * Math.PI); ctx.drawImage(img, 0, 0); } - 导出修正后图片用
canvas.toDataURL("image/jpeg")，此时方向已固化
image-orientation: from-image 的兼容性陷阱
CSS 属性 image-orientation: from-image 理论上能让浏览器自动处理 EXIF 方向，但实际限制极多：
立即学习“前端免费学习笔记（深入）”；
- 仅 Chromium 117+ 和 Safari 16.4+ 支持，Firefox 完全不支持（截至 2024）
- 仅对
<img>标签生效，对background-image、<canvas>绘制、<picture>中的<source>无效 - 即使支持，也**不改变图像原始尺寸或 canvas 像素布局**——只是视觉渲染层叠加旋转，
canvas.getContext("2d").getImageData()读出的仍是未旋转数据 - 若需服务端处理或跨浏览器一致输出，这条路走不通
真正可靠的路径只有：读 EXIF → 判断 Orientation → Canvas 重绘 → 替换或导出。别指望浏览器替你做这个决定，尤其当你要把用户上传的手机照片生成 PDF 或缩略图时。
