无法在移动输入上修复图像方向答案

【问题标题】：Can't fix image orientation on mobile input无法在移动输入上修复图像方向
【发布时间】：2021-03-29 08:25:14
【问题描述】：

这段代码曾经在 iPhone 8 上工作，现在在 iPhone 12 Chrome 上不能工作。

在我使用input从 iPhone 上的照片中选择图像并在显示前将其旋转后，图像将错误地旋转 90 度。

  getOrientation(input,function(orientation){
      resetOrientation(base64, orientation, function(resetBase64Image){


        var img = new Image();
        img.onload = function(){
        ..... // here we get the image

以及完成这项工作的功能：

function getOrientation(file, callback) {
    var reader = new FileReader();
    reader.onload = function(e) {

        var view = new DataView(e.target.result);
        if (view.getUint16(0, false) != 0xFFD8)
        {
            return callback(-2);
        }
        var length = view.byteLength, offset = 2;
        while (offset < length)
        {
            if (view.getUint16(offset+2, false) <= 8) return callback(-1);
            var marker = view.getUint16(offset, false);
            offset += 2;
            if (marker == 0xFFE1)
            {
                if (view.getUint32(offset += 2, false) != 0x45786966)
                {
                    return callback(-1);
                }

                var little = view.getUint16(offset += 6, false) == 0x4949;
                offset += view.getUint32(offset + 4, little);
                var tags = view.getUint16(offset, little);
                offset += 2;
                for (var i = 0; i < tags; i++)
                {
                    if (view.getUint16(offset + (i * 12), little) == 0x0112)
                    {
                        return callback(view.getUint16(offset + (i * 12) + 8, little));
                    }
                }
            }
            else if ((marker & 0xFF00) != 0xFF00)
            {
                break;
            }
            else
            {
                offset += view.getUint16(offset, false);
            }
        }
        return callback(-1);
    };
    reader.readAsArrayBuffer(file);
}




function resetOrientation(srcBase64, srcOrientation, callback) {
    var img = new Image();

    img.onload = function() {
    var width = img.width,
            height = img.height,
        canvas = document.createElement('canvas'),
            ctx = canvas.getContext("2d");

    // set proper canvas dimensions before transform & export
        if (4 < srcOrientation && srcOrientation < 9) {
        canvas.width = height;
      canvas.height = width;
    } else {
        canvas.width = width;
      canvas.height = height;
    }

    // transform context before drawing image
        switch (srcOrientation) {
      case 2: ctx.transform(-1, 0, 0, 1, width, 0); break;
      case 3: ctx.transform(-1, 0, 0, -1, width, height ); break;
      case 4: ctx.transform(1, 0, 0, -1, 0, height ); break;
      case 5: ctx.transform(0, 1, 1, 0, 0, 0); break;
      case 6: ctx.transform(0, 1, -1, 0, height , 0); break;
      case 7: ctx.transform(0, -1, -1, 0, height , width); break;
      case 8: ctx.transform(0, -1, 1, 0, 0, width); break;
      default: break;
    }

        // draw image
    ctx.drawImage(img, 0, 0);

        // export base64
        callback(canvas.toDataURL());
  };

    img.src = srcBase64;
}

是否有任何稳定简单的方法可以为每部 iPhone 做到这一点？

【问题讨论】：

很可能没有任何稳定的方法。您的代码需要真正理解图像才能正确定位它（因此，它在人眼看来是正确的），您不能依赖图像（可能）包含的方向数据。
@Teemu 谢谢，我应该如何“理解”图片？
嗯，你知道的，例如。一张脸的图像，你确切地知道它应该如何定位，但是如果数据表明，你的代码会盲目地将这样的图像颠倒定位。最有问题的图像是向下拍摄的（例如朝向地板），方向传感器无法知道正确的位置，结果完全是随机的。
不确定您在说什么，要了解您只有 exif 或使用 AI 的照片。你是什么意思？
AI 主要是，就像说的那样，你不能相信 exif 数据。根据您获取图像的位置，它们可能根本不包含 exif 数据（例如，许多服务器端图像处理程序会删除 exif 数据）。

标签： javascript exif

【解决方案1】：

经过大量测试，结果发现有些地方发生了变化，现在您不必在预览时旋转图像，只有在保存时到您的服务器。

在iOS 13, 14、多部 iPhone、Chrome 和 Safari 上测试。

当您第一次预览照片时，Apple 知道照片的来源和方向，因此它会以正确的方式显示它，但是当您显示来自服务器的照片时 - 他们不知道，所以他们使用 exif。

【讨论】：