求助：基于EXIF数据自动旋转图片的代码实现位置

我明白你现在的困境——你的代码能完成图片缩放、转base64和上传，但完全没处理图片的EXIF旋转信息，这就导致手机竖拍的图片在处理后会变成横的，或者方向不对。下面我会告诉你在哪里添加代码，以及具体怎么实现：

第一步：先获取图片的EXIF旋转角度 #

首先你需要读取图片的Orientation（方向）标签，这个标签记录了图片的旋转信息。最简单的方式是用exif-js这个轻量库（你可以下载后引入项目里），然后在图片加载完成后获取这个值。

第二步：在Canvas绘制时应用旋转变换 #

拿到旋转角度后，你需要调整Canvas的尺寸，并对绘图上下文做旋转/位移处理，这样图片才能正确显示。

修改后的完整代码 #

下面是插入了旋转处理逻辑的代码，我用// 新增代码标注了添加的部分：

function _(e) { return document.getElementById(e) }

function handleFiles1(e) {
  var t = new Image;
  t.onload = function() {
    // 新增代码：获取EXIF旋转角度
    let orientation = 1;
    EXIF.getData(t, function() {
      orientation = EXIF.getTag(this, "Orientation");
    });

    var e = document.createElement("canvas"),
        n = e.getContext("2d"),
        a = t.width,
        d = t.height,
        i = Math.min(maxW / a, maxH / d),
        o = a * i,
        r = d * i;

    // 新增代码：根据旋转角度调整Canvas尺寸和上下文变换
    switch(orientation) {
      case 6: // 顺时针旋转90度
        e.width = r;
        e.height = o;
        n.translate(r, 0);
        n.rotate(Math.PI / 2);
        break;
      case 8: // 逆时针旋转90度
        e.width = r;
        e.height = o;
        n.translate(0, o);
        n.rotate(-Math.PI / 2);
        break;
      case 3: // 旋转180度
        e.width = o;
        e.height = r;
        n.translate(o, r);
        n.rotate(Math.PI);
        break;
      default: // 正常方向
        e.width = o;
        e.height = r;
    }

    // 调整drawImage的参数，适配旋转后的尺寸
    n.drawImage(t, 0, 0, a, d, 0, 0, 
                (orientation === 6 || orientation === 8) ? r : o, 
                (orientation === 6 || orientation === 8) ? o : r);

    var l = new Image;
    l = e.toDataURL("image/jpeg");
    document.getElementById("output1").src = l;

    var s = l.replace(/^data:image\/(png|jpg);base64,/, ""),
        u = new FormData;
    u.append("picture1", s), u.append("TC", TCodeVar);

    var p = new XMLHttpRequest;
    p.upload.addEventListener("progress", progressHandler1, !1),
    p.addEventListener("load", completeHandler1, !1),
    p.addEventListener("error", errorHandler1, !1),
    p.open("POST", "UploadPage.php"),
    p.send(u)
  };
  t.src = URL.createObjectURL(e.target.files[0]);
}

关键说明 #

• Orientation标签的常见值：1（正常）、3（180度旋转）、6（顺时针90度）、8（逆时针90度），我们只需要处理这几种最常见的情况。
• 旋转画布时必须配合translate位移，不然图片会被绘制到Canvas可视区域之外。
• 如果你不想用第三方库，也可以自己通过FileReader和DataView读取图片的EXIF数据，但逻辑会复杂一些，用exif-js是最快捷的方式。

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