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)

推荐阅读更多精彩内容