English | 简体中文

apng-handler

decode and encode (a)png in modern browser environment 🌐. Including：

1. （decode）get png frames from apng buffer
2. （encode）assemble png buffers to apng buffer

Intro

We have already used a great library -- apng-canvas in our production environment. It gives you ability to control apng playing behavior. Generally, I spend most of my time on normal logic codes. I hardly get the chance to know blob, buffer and bitwise operation while this lib has few annotation. We need more references to know more about(a)png. I learned this lib and add lots of annotation to it.

Additionally, I wrote a snippet of assemble apng buffer from png buffers, which runs in browser environment.

Usage

Currently this package doesn't offer enough abilities. But I still publish it to npm, in case that you want to try it out.

Install

• install as a node_module

npm install apng-handler --save

• use cdn

<script src="https://unpkg.com/apng-handler@{{version}}/dist/index.js"></script>

demo

// window.ApngHandler
import { apngDecoder, apngAssembler } from 'apng-handler';

const appendImg = (buf: ArrayBuffer) => {
  const img = document.createElement('img');
  img.width = 100;
  const url = URL.createObjectURL(
    new Blob([new Uint8Array(buf)], { type: 'image/apng' })
  );
  img.src = url;
  document.body.appendChild(img);
};

const blob = apngAssembler({
  buffers: [],// image buffers
  width: 302,
  height: 192,
});

blob.arrayBuffer().then((buf) => {
  appendImg(buf);
  apngDecoder(buf).then((blobs) => {
    blobs.forEach((b) => {
      b.arrayBuffer().then((_b) => {
        appendImg(_b);
      });
    });
  });
});
    

More References

1. APNG Specification

   Most important ref, explained specification of apng compared to png.

2. W3C PNG Spec

   W3C specification. Must learn to know deep about png structure. I just learned some conception stuff without reading through. When using compression techs, I suppose I have to go back to this ref.

3. APNG Wiki

   that picture has been referred by many articles (I posted it in README)

4. Web 端 APNG 播放实现原理

   including a great picture, mainly explaining apng-canvas lib

5. ezgif.com

   online tool of processing apng and gif

6. APNG Assembler

   application of generating apng

7. Join up PNG images to an APNG animated image

   an answer about encoding approach in Node environment

8. UPNG.js

   I used once but failed, perhaps I used it wrong. The code is also hard to understand. I didn't go deep.

Tail

💓 Plz feel free to make pr to add more functions of handling apng like compressing, clipping and coloring, etc.