HTML文件上传怎么把图片自动旋转矫正-html教程-PHP中文网

html中img标签不自动纠正exif orientation方向，因规范未要求且主流浏览器默认忽略；可靠方案是用piexifjs读取方向值，在canvas中按规则重绘并导出矫正后的图片数据。

html文件上传怎么把图片自动旋转矫正

移动端拍照上传的图片在 HTML 中显示歪了，不是前端渲染错了，是原始图像自带 EXIF Orientation 元数据没被处理。直接用 <img> 标签展示，浏览器不会自动按这个值旋转像素——只有部分 iOS 系统相册预览会“偷偷”转，但 Web 页面不会。

为什么 `<img>` 标签不自动纠正方向

HTML 规范没要求浏览器读取并应用 EXIF Orientation；Chrome、Firefox、Safari（桌面）默认忽略它；只有 Safari 移动端在某些场景下会做视觉补偿，但不可靠，且不改变实际像素布局。所以你看到“上传后变歪”，其实是图本身方向不对，只是原生相册帮你转了，而你的网页没转。

EXIF Orientation 是拍摄时相机传感器朝向记录，不是 CSS 变换指令
<img src="xxx"> 加 style="max-width:90%" 只是视觉覆盖，导出或截图仍是歪的
服务端如果直接存原始文件，后续所有下游使用（比如 PDF 生成、缩略图裁剪）都会继承错误方向

用 `piexifjs` 读取 `Orientation` 并在 Canvas 中重绘

真正可靠的纠正是：读取 EXIF 方向 → 创建合适尺寸的 <canvas></canvas> → 按规则把原始图像绘制进去 → 调用 canvas.toDataURL() 得到已矫正的新图片数据。

只对 file.type === "image/jpeg" 处理（JPEG 才带可靠 Orientation；PNG/WebP 一般不带）
Orientation 值为 6 表示顺时针 90°（iOS 竖拍常见），需将宽高互换 + 旋转 -90°
必须用 ctx.save()/ctx.restore() 隔离变换，否则多次绘制会叠加错乱
不要用 ctx.rotate() 直接转画布再 drawImage —— 容易裁边；应先 ctx.translate() 移动原点，再 rotate，再 drawImage

简化的关键逻辑示例：

Wechat HTML Publisher

直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。

下载

function fixOrientation(file) {
  return new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.onload = async () => {
      try {
        const exifObj = piexif.load(reader.result);
        const ori = exifObj?.["0th"]?.[piexif.ImageIFD.Orientation] || 1;
        const img = new Image();
        img.src = reader.result;
        img.onload = () => {
          let { width, height } = img;
          let canvas = document.createElement("canvas");
          let ctx = canvas.getContext("2d");
<pre class="brush:php;toolbar:false;">      if ([6, 8].includes(ori)) [width, height] = [height, width];
      canvas.width = width;
      canvas.height = height;

      ctx.save();
      switch (ori) {
        case 6: // 顺时针90° → 逆时针转90°
          ctx.translate(width, 0);
          ctx.rotate(0.5 * Math.PI);
          break;
        case 8: // 逆时针90° → 顺时针转90°
          ctx.translate(0, height);
          ctx.rotate(-0.5 * Math.PI);
          break;
        case 3:
          ctx.translate(width, height);
          ctx.rotate(Math.PI);
          break;
      }
      ctx.drawImage(img, 0, 0);
      ctx.restore();

      resolve(canvas.toDataURL("image/jpeg", 0.9));
    };
  } catch (e) {
    resolve(URL.createObjectURL(file)); // fallback
  }
};
reader.readAsArrayBuffer(file);

}); }

别用 `exif-js` 在 img onload 里硬套 CSS transform

这种写法看似快，但有三个硬伤：

仅影响当前 DOM 渲染，canvas.toBlob() 或 fetch() 上传的仍是原始歪图
transform 依赖父容器尺寸和 transform-origin，响应式布局下极易错位
安卓部分 WebView 和旧版 UC 浏览器不支持 transform 作用于 <img> 的子元素（比如你转 img.parentNode）

如果你只是临时预览、不涉及后续处理，那加个 class：img.exif-rotated-6 { transform: rotate(90deg) translateY(-50%); transform-origin: top left; } 可以应急，但别当正式方案。

上传前就矫正，而不是等后端或用户反馈

最省事的方式是在用户选完文件、还没调 fetch() 之前，就把 JPEG 文件转成已矫正的 Blob：

用 dataURLToBlob() 把 canvas.toDataURL() 转回 Blob，保持原始 file.name 和 type
避免在服务端重复解析 EXIF —— PHP 的 exif_read_data() 在高并发下有性能瓶颈，且需要开启 php_exif.dll
注意：iOS 15+ Safari 对 FileReader.readAsArrayBuffer 有内存限制，大图（>5MB）建议先用 createImageBitmap 解码降采样