圖片在手機上的轉換，壓縮，轉向

Question

情境如下

備註：使用的是react.js
使用者上傳圖片，會給使用者做裁切、轉向的動作，後再上傳

問題一：
為何會出現轉向功能。
主要是因為iphone手機 在拍照時，手持橫向或直向，會因為 exif 參數。
導致上傳圖片後照片會被強制轉向。
因此決定新增轉向功能。
轉向功能：
將圖片讀取後，使用canvas轉向後繪圖出來，再轉成base64再設置回去

const image = new Image();
        const canvas = document.createElement('canvas');
        const ctx = canvas.getContext('2d');
        canvas.width = height;
        canvas.height = width;
        image.onload = () => {
          ctx.rotate(Math.PI / 2);
          ctx.translate(0, -height);
          ctx.drawImage(image, 0, 0);
          const fileUrl = canvas.toDataURL('image/jpeg', 0.3);
          this.setState({
            AvatarLoading: false,
            Avatar: fileUrl,
            rotate: 0,
          });
        };
        image.src = Avatar;

此時問題出現了，程式是正確的，在電腦也跑得很順。
但是！！！
在手機跑得並不迅速！
求大神不要叫我換手機ＯＡＯ
請問有哪位大神時做過這類的功能嗎？或是我這還能再如何修改呢
備註：這段是向右轉的部分

Answer 1

我很久以前好像做过这种需求的项目，有个插件可以在input change的时候就读取图片信息然后进行处理exif.js,你可以看看。至于手势控制可以用hammer.js，也可以去看看