Lrz.js 压缩与 new File() 在 iOS上的兼容问

问题

H5 拍照上传，前端使用 lrz.js 压缩图片后上传到阿里云 OSS，上传需要直接传 File。
这里遇到两个问题：

1. 在 iOS13 及以上系统上预览前端压缩后的图片，图片会被莫名的翻转，低版本iOS 则不会。
2. 前端压缩出 base64 图片，再使用 new File() 将其转换为 File 对象直接传给 OSS，在低版本 iOS 上上传的照片为空白。

第一个问题

首先尝试不压缩图片，直接预览，发现并不会出现照片被错误翻转的问题，故推断是 lrz.js 的问题，查看 lrz.js 源码，发现是使用 canvas 压缩图片的，其中有这样一段旋转照片的代码：

    // 调整为正确方向
    switch (orientation) {
        case 3:
            ctx.rotate(180 * Math.PI / 180);
            ctx.drawImage(img, -resize.width, -resize.height, resize.width, resize.height);
            break;
        case 6:
            ctx.rotate(90 * Math.PI / 180);
            ctx.drawImage(img, 0, -resize.width, resize.height, resize.width);
            break;
        case 8:
            ctx.rotate(270 * Math.PI / 180);
            ctx.drawImage(img, -resize.height, 0, resize.height, resize.width);
            break;

        case 2:
            ctx.translate(resize.width, 0);
            ctx.scale(-1, 1);
            ctx.drawImage(img, 0, 0, resize.width, resize.height);
            break;
        case 4:
            ctx.translate(resize.width, 0);
            ctx.scale(-1, 1);
            ctx.rotate(180 * Math.PI / 180);
            ctx.drawImage(img, -resize.width, -resize.height, resize.width, resize.height);
            break;
        case 5:
            ctx.translate(resize.width, 0);
            ctx.scale(-1, 1);
            ctx.rotate(90 * Math.PI / 180);
            ctx.drawImage(img, 0, -resize.width, resize.height, resize.width);
            break;
        case 7:
            ctx.translate(resize.width, 0);
            ctx.scale(-1, 1);
            ctx.rotate(270 * Math.PI / 180);
            ctx.drawImage(img, -resize.height, 0, resize.height, resize.width);
            break;

        default:
            ctx.drawImage(img, 0, 0, resize.width, resize.height);
    }

这段代码根据 Exif 信息中的照片拍摄方向信息 orientation 来对照片进行旋转。

Exif 信息的 Orientation

以竖着拿手机为正方向
手机左转 90°（横着拍）Orientation 为 1
手机竖着拍（竖着拍）Orientation 为 6
手机右转 90°（横着拍）Orientation 为 3
手机左转 90°（倒过来拍）Orientation 为 8
2、4、5、7类似水平翻转与垂直翻转，实际拍照不会出现

Exif1.png
Exif2.png

经过测试，发现安卓手机会对照片进行处理无论怎么拍，得到的 Orientation 都为 1，照片为正方向。而 iOS12 及以下拍摄的照片的 Orientation 会正确记录拍摄时的方向，如不经过旋转直接在 canvas 上绘制图片会产生翻转。而 iOS13 及以上直接绘制图片到 canvas 并不会得到翻转的图片。
故推断是 iOS 13 开始对 canvas 的绘制方向做了调整，考虑到 lrz.js 已长期无人维护，压缩照片被翻转的问题只需修改 lrz.js 的源码，判断 iOS 的版本，高版本不旋转即可解决了。
注：由于测试机不够，无法推断具体iOS版本

第二个问题

这个问题是由于 File 对象在 iOS11.4 及以下的兼容问题导致的，这里找到一种解决的方案：
将压缩后的 base64 图片转为 Blob 对象，由后端将 Blob 对象转为 File 上传即可。

        // base64 转 blob
        const base64ToBlob = function (base64Data) {
          const arr = base64Data.split(',')
          const fileType = arr[0].match(/:(.*?);/)[1]
          const bstr = atob(arr[1])
          let l = bstr.length
          const u8Arr = new Uint8Array(l)
          while (l--) {
            u8Arr[l] = bstr.charCodeAt(l)
          }
          return new Blob([u8Arr], {
            type: fileType
          })
        }
        const blobToFile = function (newBlob, fileName) {
          newBlob.lastModifiedDate = new Date()
          newBlob.name = fileName.replace(/.jpeg/g, '.jpg')
          return newBlob
          // iOS 11.4 及以下 new File 上传有兼容问题，上传到 OSS 的图片不显示，
          // 这里上传 Blob + 文件名给后端，后端处理为 File 后再传 OSS
          // return new File([newBlob], file.name, {type: file.type})
        }
        // lrz 压缩出来的 file 无法上传，H5使用 压缩后的 base64 转为 Blob，传给后端
        const blob = base64ToBlob(rst.base64)
        const imgFile = blobToFile(blob, file.name)
        // console.warn('原始File', file, 'imgFile', imgFile)
        this.a = rst.base64
        this.uploadImg(imgFile, file.name)