画像のOrientation

各ブラウザ（ChromeやSafariなど）でExifのOrientationをみて画像を表示したいです。
リサイズして画像を表示させるとPCのChromeやMacのSafariではOrientationをみて正しく表示してくれます。
IOSのSafariではOrientationは無視して表示されます。
どのブラウザでも正しい向きで表示させたいのですが可能でしょうか？
ExifのOrientationを取得してリサイズ画像を回転させるとIOSのSafariでは正しく表示され、PCのChromeやMacのSafariでは正しく表示できません。
下記が再現するソースになります。
再現ソースでは元画像の縦横比は無視して単に640ｘ480リサイズしているのみで回転はさせていません。

html
1<body>
2  <div><input type="file" id="file" /></div>
3  <div><img style="width:640px" id="show" /></div>
4  <script>
5    document.getElementById('file').addEventListener('change', (e) => {
6      const reader = new FileReader();
7      reader.addEventListener('load', (ev) => {
8          const img = new Image();
9          img.addEventListener('load', () => {
10            var blob = null;
11            var canvas = document.createElement('canvas');
12            canvas.width = 640;
13            canvas.height = 480;
14            var ctx = canvas.getContext('2d');
15            ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
16            var base64 = canvas.toDataURL(e.target.files[0].type);
17            var barr, bin, i, len;
18            bin = atob(base64.split('base64,')[1]);
19            len = bin.length;
20            barr = new Uint8Array(len);
21            i = 0;
22            while (i < len) {
23              barr[i] = bin.charCodeAt(i);
24              i++;
25            }
26            blob = new Blob([barr], {type: e.target.files[0].type});
27            document.getElementById('show').src = window.URL.createObjectURL(blob);
28          })
29          img.src = ev.target.result;
30        })
31      reader.readAsDataURL(e.target.files[0]);
32    })
33  </script>
34</body>