Javascript 无法在移动输入上固定图像方向

这段代码过去在iPhone8上工作，但在iPhone12上不起作用

在我使用输入从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，有没有稳定的简单方法可以做到这一点？

经过大量测试，结果表明有些东西发生了变化，现在预览图像时不必旋转图像，只需将图像保存到服务器上即可

在iOS 13、14、多部iPhone、Chrome和Safari上进行测试

---

当你第一次预览照片时，苹果知道照片的来源和方向，所以它会以正确的方式显示，但是当你从服务器上显示照片时，他们不会，所以他们会使用exif。

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