问题
H5 拍照上传,前端使用 lrz.js 压缩图片后上传到阿里云 OSS,上传需要直接传 File。
这里遇到两个问题:
- 在 iOS13 及以上系统上预览前端压缩后的图片,图片会被莫名的翻转,低版本iOS 则不会。
- 前端压缩出 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类似水平翻转与垂直翻转,实际拍照不会出现
经过测试,发现安卓手机会对照片进行处理无论怎么拍,得到的 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)