Simple demo assembling APNGs from an HTML5 canvas.
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.