JSで画像の向き補正時iOSだとうまく動作しない

困っている点

canvasで画像を圧縮するプログラムを実装したいのですが、画像の向きを調整したときにiOSだと縦横比が正しい挙動で動いてくれなく困っています。

###　実装したいこと

WEBの画像アップローダー
アップロード前にcanvasで加工して画像を縮小
画像のexifに含まれるorientationをもとに正しい向きで描画する

環境

Laravel5.7
PHP7.x

実装したコード

JS
1<script src="https://cdnjs.cloudflare.com/ajax/libs/exif-js/2.3.0/exif.min.js"></script>
2<script>
3        const THUMBNAIL_WIDTH = 1200;
4        const THUMBNAIL_HEIGHT = 1200;
5        $('#file').change(function() {
6            var file = $(this).prop('files')[0];
7            var image = new Image();
8            var reader = new FileReader();
9            reader.onload = function(e) {
10              image.onload = function() {
11                var width, height;
12                if(image.width > image.height){
13                  var ratio = image.height/image.width;
14                  width = THUMBNAIL_WIDTH;
15                  height = THUMBNAIL_WIDTH * ratio;
16                } else {
17                  var ratio = image.width/image.height;
18                  width = THUMBNAIL_HEIGHT * ratio;
19                  height = THUMBNAIL_HEIGHT;
20                }
21                var canvas = $('#canvas')
22                             .attr('width', width)
23                             .attr('height', height);
24                var ctx = canvas[0].getContext('2d');
25                ctx.clearRect(0,0,width,height);
26
27                EXIF.getData(file, function(){
28                  var orientation = file.exifdata.Orientation;
29                  if(orientation === undefined){
30                      orientation = 1;
31                  }
32
33                  if ([5,6,7,8].indexOf(orientation) > -1) {
34                    canvas.width = image.height
35                    canvas.height = image.width
36                  } else {
37                    canvas.width = image.width
38                    canvas.height = image.height
39                  }
40
41                  switch (orientation) {
42                    case 2: ctx.transform(-1, 0, 0, 1, width, 0); break;
43                    case 3: ctx.transform(-1, 0, 0, -1, width, height); break;
44                    case 4: ctx.transform(1, 0, 0, -1, 0, height); break;
45                    case 5: ctx.transform(0, 1, 1, 0, 0, 0); break;
46                    case 6: ctx.transform(0, 1, -1, 0, height, 0); break;
47                    case 7: ctx.transform(0, -1, -1, 0, height, width); break;
48                    case 8: ctx.transform(0, -1, 1, 0, 0, width); break;
49                  }
50                  ctx.drawImage(image,0,0,image.width,image.height,0,0,width,height);
51                });
52              }
53              image.src = e.target.result;
54            }
55            reader.readAsDataURL(file);
56        });
57</script>