Skip to content

Latest commit

 

History

History
17 lines (13 loc) · 1009 Bytes

README.md

File metadata and controls

17 lines (13 loc) · 1009 Bytes

apng-assemble

Simple demo assembling APNGs from an HTML5 canvas.

Demo

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.