Source Images:

Output Image:

Since APNG is a simple extension of PNG, we can assemble animated images using individual PNGs encoded by canvas.toBlob() and offscreenCanvas.convertToBlob().

A PNG contains a couple metadata chunks and then image data as one or more `IDAT` chunks. APNG just adds a few new chunks: `acTL`, `fcTL` and `fdAT`. The last of which is just an `IDAT` with a sequence number added.

This demo works by slicing the image data out of each image and applying a minor transform to change it into the format expected by APNG. Wikipedia has an excellent diagram of what this transform looks like.

Source Code