0

I have a stream server (WebSocket server) on url wss://domain, it returns a stream of images. On chrome when I run this code, the image orientation and image size returned is correct, on Safari it returned correct orientation but with incorrect size, and it would display with wrong orientation. Why is there difference between 2 browsers ? Some another computer shows correctly on both browser, so it is not a server bug. When I save the image into the computer, the image display with the correct orientation.

    <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){
        ...
    }

Result in Chrome

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

Result in Safari

orientation: 6, image size: 828 1792
orientation: 6, image size: 828 1792
orientation: 6, image size: 828 1792
...
Vinay
  • 7,442
  • 6
  • 25
  • 48
uhnnh
  • 79
  • 10

1 Answers1

1

Your problem seems pretty similar to this: EXIF Orientation Issue in Safari Mobile

It's pretty much a browser version problem, the EXIF library was created to handle this kinds of issues.

Alberto Caballero
  • 32
  • 3