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

Question

我在 url wss://domain 上有一个流服务器（WebSocket 服务器），它 returns 图像流。在 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
...

Answer 1

您的问题似乎与此非常相似：

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

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

Safari display incorrect image orientation but correct on Chrome

javascript

orientation