uni-app 安卓手机使用手机拍照后的图片方向与原图不对应

uni-app 安卓手机使用手机拍照后的图片方向与原图不对应

信息类别 详情
产品分类 uniapp/App
PC开发环境操作系统 Windows
PC开发环境操作系统版本号 21H1
HBuilderX类型 正式
HBuilderX版本号 3.2.16
手机系统 Android
手机系统版本号 Android 11
手机厂商 小米
手机机型 小米9pro
页面类型 vue
vue版本 vue2
打包方式 云端
项目创建方式 HBuilderX

操作步骤:

uni.chooseImage({
count: 1,
sizeType: ['original', 'compressed'],
sourceType: ['album'],
success: function(res) {
// 预览图片
uni.previewImage({
urls: res.tempFilePaths,
longPressActions: {
itemList: ['发送给朋友', '保存图片', '收藏'],
success: function(data) {
console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
},
fail: function(err) {
console.log(err.errMsg);
}
}
});
}
});

预期结果:

图片与相册方向一致

实际结果:

图片与相册方向不一致

bug描述:

安卓手机使用手机拍照后的图片,图片方向与原图不对应,竖屏照片会被横置


更多关于uni-app 安卓手机使用手机拍照后的图片方向与原图不对应的实战教程也可以访问 https://www.itying.com/category-93-b0.html

3 回复

能提供一个完整的示例吗。 并且说明一下 哪里和你预期的不一致。
目前的信息,看不出来哪里有问题

更多关于uni-app 安卓手机使用手机拍照后的图片方向与原图不对应的实战教程也可以访问 https://www.itying.com/category-93-b0.html


就是上传这个图片,本来应该预览是竖的,但现在是横的

这是一个常见的Android平台图片方向问题,主要原因是Android系统拍摄的照片会通过EXIF信息存储方向信息,而部分设备在读取图片时没有正确处理EXIF方向数据。

解决方案:

方案一:使用uni.getImageInfo获取正确的图片方向

uni.chooseImage({
    count: 1,
    sizeType: ['original', 'compressed'],
    sourceType: ['album'],
    success: function(res) {
        const tempFilePath = res.tempFilePaths[0];
        
        uni.getImageInfo({
            src: tempFilePath,
            success: (imageInfo) => {
                // imageInfo.orientation 包含图片方向信息
                // 如果orientation不为0,说明图片需要旋转
                if (imageInfo.orientation && imageInfo.orientation !== 0) {
                    // 使用canvas进行旋转校正
                    correctImageOrientation(tempFilePath, imageInfo.orientation);
                } else {
                    // 直接预览
                    previewImage(tempFilePath);
                }
            }
        });
    }
});

function correctImageOrientation(filePath, orientation) {
    // 创建canvas进行旋转处理
    const canvas = uni.createCanvasContext('myCanvas');
    const img = new Image();
    
    img.onload = function() {
        // 根据orientation值进行相应的旋转
        switch(orientation) {
            case 3:
                canvas.rotate(180 * Math.PI / 180);
                canvas.drawImage(img, -img.width, -img.height);
                break;
            case 6:
                canvas.rotate(90 * Math.PI / 180);
                canvas.drawImage(img, 0, -img.height);
                break;
            case 8:
                canvas.rotate(-90 * Math.PI / 180);
                canvas.drawImage(img, -img.width, 0);
                break;
            default:
                canvas.drawImage(img, 0, 0);
        }
        
        canvas.draw(false, () => {
            uni.canvasToTempFilePath({
                canvasId: 'myCanvas',
                success: (res) => {
                    previewImage(res.tempFilePath);
                }
            });
        });
    };
    
    img.src = filePath;
}

function previewImage(url) {
    uni.previewImage({
        urls: [url]
    });
}

方案二:使用plus.io的exif方向校正(仅App端)

// 在manifest.json中配置使用plus.io
// 然后在代码中:
if (uni.getSystemInfoSync().platform === 'android') {
    const bitmap = plus.io.convertAbsoluteFileSystem(tempFilePath);
    const BitmapFactory = plus.android.importClass("android.graphics.BitmapFactory");
    const ExifInterface = plus.android.importClass("android.media.ExifInterface");
    
    const options = new BitmapFactory.Options();
    options.inJustDecodeBounds = false;
    const bitmapObj = BitmapFactory.decodeFile(bitmap, options);
    
    const exif = new ExifInterface(bitmap);
    const orientation = exif.getAttributeInt(
        ExifInterface.TAG_ORIENTATION,
        ExifInterface.ORIENTATION_NORMAL
    );
    
    // 根据orientation进行旋转处理
}
回到顶部