foglerek / canvas2apng

Pure JavaScript HTML5 Canvas to Animated APNG.

Canvas2APNG

Canvas2APNG lets you make APNG animations with pure Javascript. One JS file is needed to create animations of your changing canvas. You can play the animation directly on your page or save it as a local file (extension .png).
For more info about APNG see: https://en.wikipedia.org/wiki/APNG

Demo

Animation examples generated by Canvas2APNG.

    
Most browsers support the playing of APNG animations.
If these images are not animating, the animation is stopped (after 7 times) or your browser does not support APNG.

News

06 aug 2017:
First publish of my CANVAS to APNG encoder to generate animations of a changing Html5 canvas element.

13 aug 2017:
I have found a bug. The bug occurs when the canvas image is too complex. Then more than one so called IDAT and fdAT chunks are present. This causes an error while reading the APNG file. I hope I will soon have a solution for it.

14 aug 2017:
Solution implemented for the bug of yesterday.

18 aug 2017:
An application has been realised in my Chess Diagram Maker where online an animation of chess can be created (GIF or PNG). A similar application is realised in my Draughts Diagram maker.

Basic Usage

1. First you need to include the JS file in your html:
   <script type="text/javascript" src="canvas2apng.js"> </script>

2. To create an APNG animation you need a canvas element in your html:
   <canvas id="myCanvas" > </canvas>
   In your script define:
   var canvas = document.getElementById("myCanvas");

3. Create an encoder object in your script (often a global var is useful):
   window.encoder = new APNGencoder(canvas);

4. The main structure of your script should be:
   

   • Set encoder in start modus: encoder.start();
   • For each change of the canvas add a frame to the animation: encoder.addFrame();
   • Stop encoder, animation ready: encoder.finish();

5. While writing your canvas changes, you specify moments to write the canvas data to the encoder with the addFrame() function. Each time you add a frame to the encoder, the canvas image will be added to the animation.

6. After finishing the encoder you can save the animation data to an image element.
   Or you can download the animation as a local file (extension .png).
   See the demo application how to do that.

Encoder commands

• Define an instance of the APNGencoder object. Parameter is the canvas element.
  var encoder = new APNGencoder(canvas);

• Set properties of the animation. At start or somewhere between adding frames.

  • Number of animation loops. Infinite loop is 0.
    encoder.setRepeat(2);
  • Delay between frame in multiples of 1/100 sec.
    encoder.setDelay(80);
  • Set dispose attribute (values 0,1,2). See APNG specs.
    encoder.setDispose(0);
  • Set blend attribute (values 0,1). See APNG specs.
    encoder.setBlend(1);

• Processing commands.

  • Set encoder in start modus. Ready for adding frames to the animation.
    encoder.start();
  • Add frames to the animation.
    encoder.addFrame();
  • Stop encoder, animation ready.
    encoder.finish();
  • Get the result of the animation. The result is an array of unsigned integers representing a APNG animation.
    With encoder.stream() you get an instance of the ByteArray object with some useful methods.
    The encoder.stream().bin command gives the array of the animation.

ByteArray

To facilitate processing, a special object ByteArray is defined. The animation is stored in an instance of ByteArray, part of the application. It hold an array of unsigned integers with some specific methods to process PNG data.
The resulting ByteArray can be asked by encoder.stream() and the array by encoder.stream().bin
Some useful methods facilitates debugging and converting the instance of a ByteArray object.

• bin
• toStrHex()
• toStrBase64()
• toStrAscii()
• toStrDec()

And some useful functions:

• decimalToHex()
• bytesToBase64()
• base64ToBytes()

Display the animation

To display the animation at your page use an image element and define the ".src" attribute as:

• var base64Out = bytesToBase64(encoder.stream().bin);
• img.src = "data:image/png;base64," + base64Out;
  

You can also download (save) the animation as local PNG file by using a link element (<a>) with download attribute. See the function downloadAPNG(iLink) in the demo application.

CRC32 Calculation

A function is included to calculate CRC32 values (see code).