ProgressiveJpeg介绍与在Android中的使用

什么是Jpeg

JPEG/JFIF是万维网(World Wide Web)上最普遍的被用来存储和传输照片的格式。它并不适合于线条绘图(drawing)和其他文字或图标(iconic)的图形,因为它的压缩方法用在这些类型的图形上,得到的结果并不好(PNG和GIF格式通常是用来存储这类的图形;GIF每个像素只有8比特,并不很适合于存储彩色照片,PNG可以无损地存储照片,但是文件太大的缺点让它不太适合在网络上传输)。

什么是ProgressiveJpeg

我们在网页中浏览大图时,如果图片够大,网速够慢,我们能够很清晰的看到一个现象。图片是由模糊到清晰慢慢呈现的。这个就是ProgressiveJpeg所展示的渐进式加载。如下图所示:

ProgressiveJpeg

如何生成ProgressiveJpeg

网上有很多PS生成的方法,不过这不是最方便的方案,七牛可以对上传的图片进行直接转化。

interlace 是否支持渐进显示。取值1支持渐进显示,取值0不支持渐进显示(默认为0)。适用jpg目标格式,网速慢时,图片显示由模糊到清晰。

示例:

https://odum9helk.qnssl.com/resource/gogopher.jpg?imageMogr2/thumbnail/300x300/interlace/1

在Android中如何使用ProgressiveJpeg

目前,在众多的开源图片加载库中,只有Fresco支持了ProgressiveJpeg格式图片的加载。

详见Fresco文档

自此,对于ProgressiveJpeg,我们已经能上手了。

但Fresco有包体积过大的缺点,我们如果为了支持ProgressiveJpeg就受到了Fresco的其他限制。所以,我们从原理上了解一下ProgressiveJpeg格式,尝试写出一个轻量的库。


ProgressiveJpeg格式

Jpeg

ProgressiveJpeg的编码格式非常复杂,但使用渐进式加载,我们并不需要破解它所有的奥秘。因为不论支不支持渐进式加载,一般的解码器(如Android中的BitmapFactory)一定能够解码出最终完整的Jpeg图片。

那么,为什么它们无法支持渐进式呢。原来一般的解码器解码图片文件时会把整个文件读完再解码,ProgressiveJpeg的图片中,包含了多Scan(包含了一张图片压缩信息)。因此,ProgressiveJpeg中的一部分数据便足以解码出一张完整的、相对模糊的图片。

了解到这里,我们便能够很容易地想到,其实渐进式加载的奥秘,其实就是在ProgressiveJpeg的数据流中找到合适的点。当我们读到这个点时,这个点之前的数据便可以被解析出一张图片。同时,我们继续读取数据流,找到下一个可解析点,就可以解析出一张更清晰的图片。


自己解析ProgressiveJpeg

我们先来看看解析(寻找某个Scan)的过程。 首先,我创建了一个OutputStream将读到的数据写入其中,方便随时在读到合适的位置时,用它生成一个byte[]渲染成图片。

这个合适的位置通过上面的图表,其实是EOI或SOS时。 当寻找到这个点时,我们调用newScanOrImageEndFound();将数据进行包装传到外部。 我们先来看看寻找EOI或SOS的代码

/**
 * Progressively scans jpeg data and instructs caller when enough data is available to decode
 * a partial image.
 * <p/>
 * <p> This class treats any sequence of bytes starting with 0xFFD8 as a valid jpeg image
 * <p/>
 * <p> Users should call parseMoreData method each time new chunk of data is received. The buffer
 * passed as a parameter should include entire image data received so far.
 */
public class ProgressiveJpegParser {

    /**
     * Initial state of the parser. Next byte read by the parser should be 0xFF.
     */
    private static final int READ_FIRST_JPEG_BYTE = 0;

    /**
     * Parser saw only one byte so far (0xFF). Next byte should be second byte of SOI marker
     */
    private static final int READ_SECOND_JPEG_BYTE = 1;

    /**
     * Next byte is either entropy coded data or first byte of a marker. First byte of marker
     * cannot appear in entropy coded data, unless it is followed by 0x00 escape byte.
     */
    private static final int READ_MARKER_FIRST_BYTE_OR_ENTROPY_DATA = 2;

    /**
     * Last read byte is 0xFF, possible start of marker (possible, because next byte might be
     * "escape byte" or 0xFF again)
     */
    private static final int READ_MARKER_SECOND_BYTE = 3;

    /**
     * Last two bytes constitute a marker that indicates start of a segment, the following two bytes
     * denote 16bit size of the segment
     */
    private static final int READ_SIZE_FIRST_BYTE = 4;

    /**
     * Last three bytes are marker and first byte of segment size, after reading next byte, bytes
     * constituting remaining part of segment will be skipped
     */
    private static final int READ_SIZE_SECOND_BYTE = 5;

    /**
     * Parsed data is not a JPEG file
     */
    private static final int NOT_A_JPEG = 6;

    private static final int DIRECTLY_END = 7;

    /**
     * The buffer size in bytes to use.
     */
    private static final int BUFFER_SIZE = 32 * 1024;

    private int mBufferSize = BUFFER_SIZE;

    private int mParserState;
    private int mLastByteRead;



    public interface OnImageDataListener {
        void onImageDataReady(byte[] datas);
    }

    private OnImageDataListener mOnImageDataListener;

    public ProgressiveJpegParser() {
        mLastByteRead = 0;
        mParserState = READ_FIRST_JPEG_BYTE;
    }

    public void setOnImageDataListener(OnImageDataListener listener) {
        mOnImageDataListener = listener;
    }

    private ByteArrayOutputStream mBaos ;


    private void writeToBaos(ByteArrayOutputStream outputStream, int nextByte) {
        outputStream.write(nextByte);
    }

    private void writeToBaos(InputStream inputStream, ByteArrayOutputStream outputStream, int length)
            throws IOException {

        byte[] buffer;
        int readNum = 0;
        while (length > mBufferSize) {
            buffer = new byte[mBufferSize];
            int perReadNum = 0;
            while (perReadNum < mBufferSize) {
                perReadNum += inputStream.read(buffer, 0, mBufferSize - perReadNum);
                readNum += perReadNum;
            }
        }
        buffer = new byte[length - readNum];
        while (readNum < length) {
            readNum += inputStream.read(buffer, 0, length - readNum);
        }


        outputStream.write(buffer);

    }

    private boolean writeToBaos(InputStream inputStream, ByteArrayOutputStream outputStream)
            throws IOException {
        final byte[] bytes = new byte[mBufferSize];
        int count;
        while ((count = inputStream.read(bytes, 0, mBufferSize)) != -1) {
            outputStream.write(bytes, 0, count);

        }
        return true;
    }


    /**
     * Parses more data from inputStream.
     *
     * @param inputStream instance of buffered pooled byte buffer input stream
     */
    public boolean doParseMoreData(final InputStream inputStream, ByteArrayOutputStream outputStream) {
        mBaos = outputStream;
        try {
            int nextByte;
            while ((nextByte = inputStream.read()) != -1) {
                writeToBaos(outputStream, nextByte);

                switch (mParserState) {
                    case READ_FIRST_JPEG_BYTE:
                        if (nextByte == JfifUtil.MARKER_FIRST_BYTE) {
                            mParserState = READ_SECOND_JPEG_BYTE;
                        } else {
                            mParserState = NOT_A_JPEG;
                        }
                        break;

                    case READ_SECOND_JPEG_BYTE:
                        if (nextByte == JfifUtil.MARKER_SOI) {
                            mParserState = READ_MARKER_FIRST_BYTE_OR_ENTROPY_DATA;
                        } else {
                            mParserState = NOT_A_JPEG;
                        }
                        break;

                    case READ_MARKER_FIRST_BYTE_OR_ENTROPY_DATA:
                        if (nextByte == JfifUtil.MARKER_FIRST_BYTE) {
                            mParserState = READ_MARKER_SECOND_BYTE;
                        }
                        break;

                    case READ_MARKER_SECOND_BYTE:
                        if (nextByte == JfifUtil.MARKER_FIRST_BYTE) {
                            mParserState = READ_MARKER_SECOND_BYTE;
                        } else if (nextByte == JfifUtil.MARKER_ESCAPE_BYTE) {
                            mParserState = READ_MARKER_FIRST_BYTE_OR_ENTROPY_DATA;
                        } else {
                            if (nextByte == JfifUtil.MARKER_SOS || nextByte == JfifUtil.MARKER_EOI) {
                                newScanOrImageEndFound();
                            }

                            if (doesMarkerStartSegment(nextByte)) {
                                mParserState = READ_SIZE_FIRST_BYTE;
                            } else {
                                mParserState = READ_MARKER_FIRST_BYTE_OR_ENTROPY_DATA;
                            }
                        }
                        break;

                    case READ_SIZE_FIRST_BYTE:
                        mParserState = READ_SIZE_SECOND_BYTE;
                        break;

                    case READ_SIZE_SECOND_BYTE:
                        final int size = (mLastByteRead << 8) + nextByte;
                        // We need to jump after the end of the segment - skip size-2 next bytes.
                        // We might want to skip more data than is available to read, in which case we will
                        // consume entire data in inputStream and exit this function before entering another
                        // iteration of the loop.
                        final int bytesToSkip = size - 2;
                        // StreamUtil.skip(inputStream, bytesToSkip);

                        // Todo by lsy: Save the skip data in Buffer
                        writeToBaos(inputStream, outputStream, bytesToSkip);
                        mParserState = READ_MARKER_FIRST_BYTE_OR_ENTROPY_DATA;
                        break;

                    case NOT_A_JPEG:
                        writeToBaos(inputStream, outputStream);
                        break;
                    case DIRECTLY_END:
                        writeToBaos(inputStream, outputStream);
                        break;
                    default:
                        break;
                }

                mLastByteRead = nextByte;
            }
        } catch (IOException ioe) {
            // does not happen, input stream returned by pooled byte buffer does not throw IOExceptions
        }
        return true;
    }

    /**
     * Not every marker is followed by associated segment
     */
    private static boolean doesMarkerStartSegment(int markerSecondByte) {
        if (markerSecondByte == JfifUtil.MARKER_TEM) {
            return false;
        }

        if (markerSecondByte >= JfifUtil.MARKER_RST0 && markerSecondByte <= JfifUtil.MARKER_RST7) {
            return false;
        }

        return markerSecondByte != JfifUtil.MARKER_EOI && markerSecondByte != JfifUtil.MARKER_SOI;
    }


/**
 * Util for obtaining information from JPEG file.
 */
public class JfifUtil {

  /**
   * Definitions of jpeg markers as well as overall description of jpeg file format can be found
   * here: <a href="http://www.w3.org/Graphics/JPEG/itu-t81.pdf">Recommendation T.81</a>
   */
  public static final int MARKER_FIRST_BYTE = 0xFF;
  public static final int MARKER_ESCAPE_BYTE = 0x00;
  public static final int MARKER_SOI = 0xD8;
  public static final int MARKER_TEM = 0x01;
  public static final int MARKER_EOI = 0xD9;
  public static final int MARKER_SOS = 0xDA;
  public static final int MARKER_APP1 = 0xE1;
  public static final int MARKER_SOFn = 0xC0;
  public static final int MARKER_RST0 = 0xD0;
  public static final int MARKER_RST7 = 0xD7;
  public static final int APP1_EXIF_MAGIC = 0x45786966;

  private JfifUtil() {
  }


}

接近三百行的代码,比较难以阅读。但对照上面的格式说明,细心读一读会发现,我们就是在寻找上面所说的格式,然后在找到格式后,调用newScanOrImageEndFound();。 上面代码中,我们将读到的所有字节都写入了mBaos中。所以,在newScanOrImageEndFound();中我们将mBaos的数据拿出来做处理。

    private void newScanOrImageEndFound() throws IOException {

        if (mOnImageDataListener != null) {
            byte[] bytes = mBaos.toByteArray();
            byte[] tailBytes = new byte[] {(byte) JfifUtil.MARKER_FIRST_BYTE, (byte) JfifUtil.MARKER_EOI};
            byte[] finalBytes = new byte[bytes.length ];
            System.arraycopy(bytes , 0 , finalBytes ,0, bytes.length-2);
            System.arraycopy(tailBytes , 0 , finalBytes ,bytes.length-2, tailBytes.length);
            mOnImageDataListener.onImageDataReady(finalBytes);
        }

    }

包装数据也非常简单,由于我们发现的数据是以SOS或EOI结尾的,但我们要欺骗BitmapFactory现在给它的就是完整的数据。所以我们将SOS或EOI的结尾一律替换为EOI的结尾。这类似于告诉BitmapFactory当前的byte[]已经是一张完整的图片啦。

最后,我们在外面调用这个方法。

mDecodeThread = new Thread(new Runnable() {
            @Override
            public void run() {
                ProgressiveJpegParser parser = new ProgressiveJpegParser();
                parser.setOnImageDataListener(
                        new ProgressiveJpegParser.OnImageDataListener() {
                            @Override
                            public void onImageDataReady(byte[] datas) {
                                mBitmap = BitmapFactory.decodeByteArray(datas, 0, datas.length);
                                try {
                                    Thread.sleep(1000);
                                } catch (InterruptedException e) {
                                    e.printStackTrace();
                                }
                                mUiHandler.sendEmptyMessage(BITMAP_READY);
                            }

                        }
                );
                AssetManager assetManager = getAssets();
                InputStream sourceInput = null;
                try {
                    sourceInput = assetManager.open("jpeg_test.jpg");
                } catch (IOException e) {
                    e.printStackTrace();
                }
                ByteArrayOutputStream outputStream = new ByteArrayOutputStream();
                parser.doParseMoreData(sourceInput, outputStream);
            }
        });

将准备好的byte[]送给BitmapFactory去解析,得到Bitmap就可以显示了。

通过这种方法,我们就可以在Android设备上也展现出渐进式加载的效果。是不是很cooool。

但是,这个方法因为会不断地产生byte[]其实非常吃内存。在实际使用中,我们可以考虑限制渐进图片的粒度。比如我只显示前两张,就不再寻找过渡图了,这些优化就不在此赘述。

以上。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏生信技能树

下载TCGA所有癌症的maf文件做signature分析

才sanger研究所已经做好了这个分析,但是值得我们重复一下,效果如下: ? TCGA所有癌症的mutation signature 首先TCGA所有癌症的ma...

60412
来自专栏我是攻城师

在Lucene或Solr中实现高亮的策略

3725
来自专栏安恒网络空间安全讲武堂

ecshop3.X 命令执行漏洞分析

刷漏洞信息的时候看到有师傅分析了2.7最新版的命令执行,然后先知有师傅说3.x也有,但是要绕waf,于是弄来了3.6的源码进行复现。

6672
来自专栏GIS讲堂

Arcgis4js实现链家找房的效果

买房的各位亲们不知是否留意过链家的"地图找房",这样的功能对于使用者来说,是非常方便的,大家可通过连接(https://bj.lianjia.com/ditu/...

822
来自专栏我是攻城师

ElasticSearch之Java Api聚合分组实战

4176
来自专栏wannshan(javaer,RPC)

ConcurrentHashMap 锁分段 源码分析

看ConcurrentHashMap下几个属性: /** * The default concurrency level for this table...

3756
来自专栏Java3y

图书管理系统【部署开发环境、解决分类、图书、前台页面模块】

前言 巩固Servlet+JSP开发模式,做一个比较完整的小项目. 成果图 该项目包含了两个部分,前台和后台。 前台用于显示 ? 后台用于管理 ? 该项目可分为...

5714
来自专栏coding...

Flutter 简易新闻项目目标效果对比简介代码代码地址

使用flutter快速开发 Android 和 iOS 的简易的新闻客户端 API使用的是 showapi(易源数据) 加载热门微信文章

1042
来自专栏开发与安全

散列表(四):冲突处理的方法之开地址法(二次探测再散列的实现)

前面的文章分析了开地址法的其中一种:线性探测再散列,这篇文章来讲开地址法的第二种:二次探测再散列 (二)、二次探测再散列 为改善“堆积”问题,减少为完成搜索所需...

6050
来自专栏落影的专栏

Audio Unit播放aac/m4a/mp3等文件

前言 相关文章: 使用VideoToolbox硬编码H.264 使用VideoToolbox硬解码H.264 使用AudioToolbox编码AAC 使...

80610

扫码关注云+社区