解决H5项目中 ios 端使用 input 或者 antd mobile 上传图片组件图片展示与拍摄方向不一致的问题

一些说明

这个问题可能是由于图片的EXIF数据中的方向标签（Orientation）没有被正确处理导致的。当你用手机拍摄一张照片时，手机会在EXIF数据中记录下照片的拍摄方向。然而，一些浏览器（包括一些版本的iOS Safari）在显示图片时并不会考虑这个方向标签，所以图片可能会被错误地旋转。

要解决这个问题，你可以在上传图片之前使用JavaScript库（如exif-js或blueimp-load-image）来读取图片的EXIF数据，并根据方向标签来旋转图片。以下是一个使用blueimp-load-image的示例：

借助第三方库

npm install blueimp-load-image

处理图片文件

在 beforeUpload 函数中处理，代码中使用的是antd mobile 5 中的ImageUploader，beforeUpload需要返回 File | null，可依据实际情况自行调整。

        // 判断当前环境是否为iOS
        const isIOS = /iPad|iPhone|iPod/.test(navigator.userAgent);
        if (!isIOS) {
          return file;
        }

        // 解决ios端下竖向拍照照片展示横向的问题，使用 blueimp-load-image 来旋转图片
        return new Promise<File | null>((resolve, reject) => {
          loadImage(
            file,
            canvas => {
              if (canvas.type === 'error') {
                reject(new Error('Error loading image'));
              } else {
                canvas.toBlob(blob => {
                  resolve(new File([blob], file.name, { type: file.type }));
                }, file.type);
              }
            },
            { orientation: true, canvas: true }
          );
        });

以上代码会在上传图片之前读取图片的 EXIF 数据，并根据方向标签来旋转图片。然后，它会将旋转后的图片转换为一个新的 File对象，并返回这个对象。这样，上传的图片就会有正确的方向了。