Source Images:
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