Safari 显示不正确的图像方向，但在 Chrome 上正确答案

【问题标题】：Safari display incorrect image orientation but correct on ChromeSafari 显示不正确的图像方向，但在 Chrome 上正确
【发布时间】：2020-11-16 08:48:33
【问题描述】：

我在 url wss://domain 上有一个流服务器（WebSocket 服务器），它返回一个图像流。在 chrome 上运行此代码时，返回的图像方向和图像大小是正确的，在 Safari 上它返回正确的方向但大小不正确，并且会以错误的方向显示。为什么2个浏览器之间有区别？另一台计算机在两个浏览器上都正确显示，因此它不是服务器错误。当我将图像保存到计算机时，图像以正确的方向显示。

    <body>
      <img id="image" />
    </body>


    var ws = new WebSocket('wss://domain')
    ws.binaryType = 'blob'
    ws.onmessage = function (mes) {
        if (mes.data instanceof Blob) {
          // var img = new Image()
          var img = document.getElementById('image')
          var blob = new Blob([mes.data], {
            type: 'image/jpeg'
          })

          img.onload = function () {
              console.log('orientation: %s, image size: %s %s', readOrientation(blob), img.width, img.height)
          }

          var dataUrl = URL.createObjectURL(blob)
          img.src = dataUrl
        }
    }

    ws.onopen = function (mes) {
        ws.send('on')
    }

    function readOrientation(blob){
        ...
    }

Chrome 中的结果

orientation: 6, image size: 1792 828
orientation: 6, image size: 1792 828
orientation: 6, image size: 1792 828
...

Safari 中的结果

orientation: 6, image size: 828 1792
orientation: 6, image size: 828 1792
orientation: 6, image size: 828 1792
...

【问题讨论】：

标签： javascript orientation

【解决方案1】：

您的问题似乎与此非常相似： EXIF Orientation Issue in Safari Mobile

这几乎是浏览器版本问题，创建 EXIF 库就是为了处理这类问题。

【讨论】：