问题

图片加载在Android开发中无处不在,也是让开发者比较头疼的一个地方,因为稍有不慎便可能会遇到OOM、图片失真之类的问题,那么除了常见的OOM、失真等问题之外,大家有没有遇到过图片方向不对的问题呢?
图片方向不对?啥?好像没遇到过……
嗯嗯,没遇到过也不要紧,因为今天你就“遇到”了。
那就先说明一下图片方向不对是指什么,我们来看看下面这张图:
WechatIMG182.jpeg
这张图片其实是一组图片放在一起后的整体截图,其中,每一个宫格里面都是一张图片,每个宫格里面的图片中间都有一个数字,四周则有lefttoprightbottom四个单词。
先解释一下单词在图片中的含义,lefttoprightbottom分别表示正常情况下,图片的左侧顶部右侧底部四个方位。可以看到,有一部分图片左侧并不是left,右侧也不是right,同样,顶部不是top,底部也不是bottom,显然,眼睛看到的图片方向和图片原本的方向不一致,这意味着图片发生了旋转,甚至是翻转。

原因

已经知道问题的现象了,那么接下来就该分析原因了。分析原因之前,我们先来了解下一个叫Exif的东东。

Exif

啥叫Exif?可以参考百度的解释:https://baike.baidu.com/item/Exif/422825?fr=aladdin
ExifExchangeable image file format的缩写,意为可交换图像文件格式,简单理解就是:Exif是存储在图片文件中的一串数据,描述了图片的一些属性信息,包括图片格式、尺寸、分辨率、色彩空间等。
Exif包含很多信息,这里我使用EXIF信息查看器查看下面这张图片的Exif信息:
landscape_3.jpg
得到的Exif信息摘要如下:
image.png
image.png
image.png
image.png
image.png
image.png
image.png
image.png
细心的同学看到最后可能发现了和本片文章主题相关的一项信息,就是IFDO这一栏,IFDO这一栏描述了图片的方向和分辨率,其中方向为Rotate 180,是什么意思呢?意思就是当前这张图片被旋转了180°,如果图片展示的时候不经过任何处理,那么我们看到的将是一张倒立的图片。

解释

也就是说图片呈什么方向展示,和Exif中对图片方向的描述有关!

解决方案

接下来我们开始寻找解决方案。

调研与思考

Android端表现

首先,我们先看下Android手机的系统相册以及部分主流App是怎么处理的。
经过一番测试与调研,发现部分手机的系统相册以及常用的App,都会对旋转过的图片进行纠正,而对于翻转过(镜像)的图片则没有处理。例如本文最开始那张一组图片的截图,是我截的手机系统相册的图,其中数字为1368的图片是被旋转过的,但在手机上看起来方向却是正常的,而其它数字的图片是镜像的,看起来仍是翻转的。再如大家使用的微信,当我用微信从相册选择图片时,情况如下:
微信图片选择orientation表现.jpg
可以看到表现和系统相册一样,只有数字为1368的图片方向是正常的,而其它图片的方向还是翻转的。
那么我们在开发过程中应该怎么处理呢?就Android端的表现来看,如果没有特殊要求,只需要处理旋转的图片就可以了,因为翻转的图片几乎很少遇到,当然,如果一定要处理翻转的图片,也是可以实现的。

iOS端表现

经过同样的测试发现,iOS端不管是系统相册还是在微信上,图片全部都是正常展示的,由此可见,iOS端相比Android,更倾向于纠正所有的图片方向错误问题。

具体实现

下面来看一下具体实现方案。我们可以通过MatrixBitmap进行旋转或翻转,以改变图片原来错误的方向。大致思路是:

  • 通过ExifInterface获取图片的Exif方向信息;
  • 判断图片的Exif方向是否为“未指明”(ExifInterface.ORIENTATION_UNDEFINED)或“正常”(ExifInterface.ORIENTATION_NORMAL)这两种情况,如果是则不处理,不再走接下来的逻辑,如果不是则创建Matrix实例,并根据Exif方向对Matrix实例设置不同的变换操作;
  • 将图片转为Bitmap,通过Matrix实例对Bitmap进行变换;
  • 得到变换后的已纠正方向的Bitmap

代码如下:

package com.xy.picorientation

import android.graphics.Bitmap
import android.graphics.Bitmap.CompressFormat
import android.graphics.BitmapFactory
import android.graphics.Matrix
import android.media.ExifInterface
import java.io.File
import java.io.FileOutputStream
import java.io.IOException

/**
 * 根据图片exif信息纠正图片方向
 */
fun File.correctImageExifOrientation(): File {
    val absolutePath = absolutePath
    val exifInterface = ExifInterface(absolutePath)
    val orientation = exifInterface.getAttributeInt(
        ExifInterface.TAG_ORIENTATION,
        ExifInterface.ORIENTATION_NORMAL
    )
    if (orientation == ExifInterface.ORIENTATION_UNDEFINED || orientation == ExifInterface.ORIENTATION_NORMAL) {
        return this
    }
    val matrix = Matrix()
    when (orientation) {
        ExifInterface.ORIENTATION_FLIP_HORIZONTAL -> matrix.setScale(-1f, 1f)
        ExifInterface.ORIENTATION_ROTATE_180 -> matrix.setRotate(180f)
        ExifInterface.ORIENTATION_FLIP_VERTICAL -> matrix.setScale(1f, -1f)
        ExifInterface.ORIENTATION_TRANSPOSE -> {
            matrix.setRotate(90f)
            matrix.postScale(-1f, 1f)
        }
        ExifInterface.ORIENTATION_ROTATE_90 -> matrix.setRotate(90f)
        ExifInterface.ORIENTATION_TRANSVERSE -> {
            matrix.setRotate(-90f)
            matrix.postScale(-1f, 1f)
        }
        ExifInterface.ORIENTATION_ROTATE_270 -> matrix.setRotate(-90f)
    }
    var bitmap = BitmapFactory.decodeFile(absolutePath)
    val width = bitmap.width
    val height = bitmap.height
    bitmap = Bitmap.createBitmap(bitmap, 0, 0, width, height, matrix, true)
    val ext = substringAfterLast("/").substringAfterLast(".", "").let {
        if (it.isBlank()) null else it
    when {
        "png".equals(ext, true) -> saveBitmap(bitmap, CompressFormat.PNG, 100)
        "webp".equals(ext, true) -> saveBitmap(bitmap, CompressFormat.WEBP, 100)
        else -> saveBitmap(bitmap, CompressFormat.JPEG, 100)
    }
    return this
}

/**
 * 保存Bitmap到文件
 *
 * @param bitmap Bitmap对象
 * @param format 压缩格式
 * @param quality 压缩质量
 * @return 是否保存成功
 */
fun File.saveBitmap(bitmap: Bitmap, format: CompressFormat, quality: Int): Boolean {
    val parentFile = parentFile
    if (parentFile?.exists() == true) {
        if (exists()) {
            delete()
        }
    } else {
        parentFile?.mkdirs()
    }
    var out: FileOutputStream? = null
    return try {
        out = FileOutputStream(this)
        bitmap.compress(format, quality, out)
        out.flush()
        true
    } catch (e: IOException) {
        e.printStackTrace()
        false
    } finally {
        if (out != null) {
            try {
                out.close()
            } catch (e: IOException) {
                e.printStackTrace()
            }
        }
    }
}

Q.E.D.


学而时习之,不亦说乎? 有朋自远方来,不亦乐乎?