GIF编解码——编解码实现原理

发表于 | 分类于 | | 阅读次数:
本文简单分析下Glide的GIF编解码器的实现原理。

前言

项目中有一个GIF图二次编辑的需求，这一功能我主要借助Glide库来实现，这里通过系列文章分享下实现过程和GIF相关的学习经验。

GIF格式

编解码与合并

编解码器实现原理下其原理。

解码器

第一步创建了 GifHeaderParser ，用来解析GIF的头部数据，主要在 parseHeader() 方法内:

1
2
3
4
5
6
7
8
9
10
11
12
13
14

public GifHeader parseHeader() {

  //...

  readHeader();
  if (!err()) {
    readContents();
    
    //...
  }

  return header;
}

先后解析Header和Contents。

Header部分：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

private void readHeader() {
  StringBuilder id = new StringBuilder();
  for (int i = 0; i < 6; i++) {
    id.append((char) read());
  }
  if (!id.toString().startsWith("GIF")) {
    header.status = STATUS_FORMAT_ERROR;
    return;
  }
  readLSD();
  if (header.gctFlag && !err()) {
    header.gct = readColorTable(header.gctSize);
    header.bgColor = header.gct[header.bgIndex];
  }
}

依次读取了文件头部的署名、GIF版本号，其中 readLSD() 读取逻辑屏幕标识符（LSD即Logical Screen Descriptor），readColorTable() 读取颜色列表。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66


/**
 * Reads Logical Screen Descriptor.
 */
private void readLSD() {
  // Logical screen size.
  header.width = readShort();
  header.height = readShort();
  /*
   * Logical Screen Descriptor packed field:
   *      7 6 5 4 3 2 1 0
   *     +---------------+
   *  4  | |     | |     |
   *
   * Global Color Table Flag     1 Bit
   * Color Resolution            3 Bits
   * Sort Flag                   1 Bit
   * Size of Global Color Table  3 Bits
   */
  int packed = read();
  header.gctFlag = (packed & LSD_MASK_GCT_FLAG) != 0;
  header.gctSize = (int) Math.pow(2, (packed & LSD_MASK_GCT_SIZE) + 1);
  // Background color index.
  header.bgIndex = read();
  // Pixel aspect ratio
  header.pixelAspect = read();
}



/**
 * Reads color table as 256 RGB integer values.
 *
 * @param nColors int number of colors to read.
 * @return int array containing 256 colors (packed ARGB with full alpha).
 */
@Nullable
private int[] readColorTable(int nColors) {
  int nBytes = 3 * nColors;
  int[] tab = null;
  byte[] c = new byte[nBytes];

  try {
    rawData.get(c);

    // TODO: what bounds checks are we avoiding if we know the number of colors?
    // Max size to avoid bounds checks.
    tab = new int[MAX_BLOCK_SIZE];
    int i = 0;
    int j = 0;
    while (i < nColors) {
      int r = ((int) c[j++]) & MASK_INT_LOWEST_BYTE;
      int g = ((int) c[j++]) & MASK_INT_LOWEST_BYTE;
      int b = ((int) c[j++]) & MASK_INT_LOWEST_BYTE;
      tab[i++] = 0xFF000000 | (r << 16) | (g << 8) | b;
    }
  } catch (BufferUnderflowException e) {
    if (Log.isLoggable(TAG, Log.DEBUG)) {
      Log.d(TAG, "Format Error Reading Color Table", e);
    }
    header.status = STATUS_FORMAT_ERROR;
  }

  return tab;
}

这里源码的注释写的很详细，结合前面的GIF图文件结构就很容易理解了。再然后是Contents部分：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44

private void readContents() {
  readContents(Integer.MAX_VALUE /* maxFrames */);
}

/**
 * Main file parser. Reads GIF content blocks. Stops after reading maxFrames
 */
private void readContents(int maxFrames) {
  // Read GIF file content blocks.
  boolean done = false;
  while (!(done || err() || header.frameCount > maxFrames)) {
    int code = read();
    switch (code) {
      case IMAGE_SEPARATOR:
        // The Graphic Control Extension is optional, but will always come first if it exists.
        // If one did exist, there will be a non-null current frame which we should use.
        // However if one did not exist, the current frame will be null
        // and we must create it here. See issue #134.
        if (header.currentFrame == null) {
          header.currentFrame = new GifFrame();
        }
        readBitmap();
        break;
      case EXTENSION_INTRODUCER:
        int extensionLabel = read();
        switch (extensionLabel) {
          case LABEL_GRAPHIC_CONTROL_EXTENSION:
            // Start a new frame.
            header.currentFrame = new GifFrame();
            readGraphicControlExt();
            break;
          case LABEL_APPLICATION_EXTENSION:
            readBlock();
            StringBuilder app = new StringBuilder();
            for (int i = 0; i < 11; i++) {
              app.append((char) block[i]);
            }
            //...
        }
        //...
    }
  }
}

不断循环读取图像块数据，其中 readBitmap() 读取图像数据，readGraphicControlExt() 读取图像控制块数据，包括延迟时间、透明色索引等，readBlock() 读取块大小：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48


/**
 * Reads Graphic Control Extension values.
 */
private void readGraphicControlExt() {
  // Block size.
  read();
  /*
   * Graphic Control Extension packed field:
   *      7 6 5 4 3 2 1 0
   *     +---------------+
   *  1  |     |     | | |
   *
   * Reserved                    3 Bits
   * Disposal Method             3 Bits
   * User Input Flag             1 Bit
   * Transparent Color Flag      1 Bit
   */
  int packed = read();
  
  //一些其他属性...

  header.currentFrame.delay = delayInHundredthsOfASecond * 10;//延时是在这里读取的
  // Transparent color index
  header.currentFrame.transIndex = read();
  // Block terminator
  read();
}

/**
 * Reads next frame image.
 */
private void readBitmap() {
  //...
  int packed = read();

  //一些其他属性...    

  // Save this as the decoding position pointer.
  header.currentFrame.bufferFrameStart = rawData.position();//保存每一帧的指针

  //...

  header.frameCount++;
  // Add image to frame.
  header.frames.add(header.currentFrame);
}

不过这里并没有直接读写Bitmap，而是用一个指针 bufferFrameStart 保存了每一帧的位置，真正的读写在读取Header数据后。我们在遍历每一帧的数据，这里是用一个指针指向当前要读的位置，advance() 方法实际上是在往前移动这一指针：

1
2
3
4
5

@Override
public void advance() {
  framePointer = (framePointer + 1) % header.frameCount;
}

之后的 getNextFrame() 和 getNextDelay() 方法就是根据这一指针指向的位置，去获取图像和延迟时间：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41

@Nullable
@Override
public synchronized Bitmap getNextFrame() {
  //...
  //获取当前帧
  GifFrame currentFrame = header.frames.get(framePointer);
  //...
  // Transfer pixel data to image.
  return setPixels(currentFrame, previousFrame);
}

/**
 * Creates new frame image from current data (and previous frames as specified by their
 * disposition codes).
 */
private Bitmap setPixels(GifFrame currentFrame, GifFrame previousFrame) {
  // Final location of blended pixels.
  final int[] dest = mainScratch;
  //...
  // Decode pixels for this frame into the global pixels[] scratch.
  decodeBitmapData(currentFrame);//这里才是实际的写入Bitmap
  //...
  // Set pixels for current image.
  Bitmap result = getNextBitmap();
  result.setPixels(dest, 0, downsampledWidth, 0, 0, downsampledWidth, downsampledHeight);
  return result;
}

/**
 * Decodes LZW image data into pixel array. Adapted from John Cristy's BitmapMagick.
 */
private void decodeBitmapData(GifFrame frame) {
  if (frame != null) {
    // Jump to the frame start position.
    rawData.position(frame.bufferFrameStart);//这里就是拿到之前保存的指针，来读取该帧的图像数据了
  }
  //...
  // Clear missing pixels.
  Arrays.fill(mainPixels, pi, npix, (byte) COLOR_TRANSPARENT_BLACK);
}

最后是在 decodeBitmapData() 方法中用LZW算法来读取每一帧图像数据的，代码很多就不贴了。

编码器

首先是 start() 方法：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

/**
 * Initiates GIF file creation on the given stream. The stream is not closed
 * automatically.
 *
 * @param os
 *          OutputStream on which GIF images are written.
 * @return false if initial write failed.
 */
public boolean start(@Nullable OutputStream os) {
    if (os == null)
        return false;
    boolean ok = true;
    closeStream = false;
    out = os;
    try {
        writeString("GIF89a"); // header
    } catch (IOException e) {
        ok = false;
    }
    return started = ok;
}

先写了入了header部分的的GIF 89a。之后再写入每一帧：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

public boolean addFrame(@Nullable Bitmap im, int x, int y) {
    if ((im == null) || !started) {
        return false;
    }
    boolean ok = true;
    try {
        //当前帧的尺寸
        if (sizeSet) {
            setFrameSize(fixedWidth, fixedHeight);
        } else {
            setFrameSize(im.getWidth(), im.getHeight());
        }
        image = im;
        getImagePixels(); // convert to correct format if necessary
        analyzePixels(); // build color table & map pixels
        if (firstFrame) {
            writeLSD(); // logical screen descriptor
            writePalette(); // global color table
            if (repeat >= 0) {
                // use NS app extension to indicate reps
                writeNetscapeExt();
            }
        }
        writeGraphicCtrlExt(); // write graphic control extension
        writeImageDesc(x, y); // image descriptor
        if (!firstFrame) {
            writePalette(); // local color table
        }
        writePixels(); // encode and write pixel data
        firstFrame = false;
    } catch (IOException e) {
        ok = false;
    }

    return ok;
}

依次写入每一帧的数据，基本都是跟解码想对应的，除了writeLSD() 写入逻辑屏幕标识符，writePalette() 写入全局颜色表外，getImagePixels() 读取每一个像素点的颜色值，之后转换为565的格式保存；writeGraphicCtrlExt() 写入图像控制块（这其中要写入包括间隔时间delay等信息），最后在 writePixels() 方法中用LZW算法写入前面读取的图像数据。