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 条评论
登录 后参与评论

相关文章

来自专栏微信公众号:Java团长

Java实现验证码功能实例

Java如何实现验证码验证功能呢?日常生活中,验证码随处可见,他可以在一定程度上保护账号安全,那么他是怎么实现的呢?

452
来自专栏菩提树下的杨过

silverlight:如何在图片上挖个洞?

一、不写代码的方法:用Blend 看图说话: 这是待处理的图片win7 ? 在win7上,画一个矩形,再用钢笔随便画个封闭的path ? 将矩形与path合...

17710
来自专栏hbbliyong

使用WPF教你一步一步实现连连看(三)

这次首先对以前的结构进行了调整: 第一步:把MyButton按钮的属性独立成一个类,放在一个单独的MyButton.cs中,把图片的初始化也放到里面。 调整代...

3327
来自专栏hightopo

基于 HTML5 Canvas 的 3D 压力器反序列化

851
来自专栏菩提树下的杨过

VisualTreeHelper

Silverlight中只有可视化树,没有WPF中的逻辑树,这一点可从SL的sdk文档中得到印证: 可视化树概念也存在于 WPF 中,它与 Silverligh...

2187
来自专栏龙渊阁测试精英

Jmeter(二)_基础元件

它用来描述一个测试方案,包含与本次性能测试所有相关的功能。也就说本次测试的所有内容是于基于一个计划的。

632
来自专栏逸鹏说道

WP、Win10开发或者WPF开发时绘制自定义窗体~例如:一个手机

WP and Win10 效果:(数字是参考值,和UI无关) ? <Page x:Class="_05.AllControls._BorderUsePa...

3435
来自专栏学习圈

移动端通用优化方案

手机屏幕帧率一般为60 FPS,也就是说一帧的渲染时间为16.7ms,所以如果页面渲染时间超过16.7ms 容易出现卡顿现象。提高页面渲染效率可以考虑如下方法:

21511
来自专栏冰霜之地

由FlexBox算法强力驱动的Weex布局引擎

在上篇文章里面谈了Weex在iOS客户端工作的基本流程。这篇文章将会详细的分析Weex是如何高性能的布局原生界面的,之后还会与现有的布局方法进行对比,看看Wee...

1194
来自专栏c#开发者

MSMQ突破4M限制的方法

    在默认情况下msmq 3.0(windows xp ,windows 2003)最大单个消息(Message size)大小4M;(包括正文和全部指定属...

2784

扫码关注云+社区