Menu
Is it possible to give an end user the ability to save as a single file an animation created client side with HTML5 Canvas - other than saving the entire HTML of the page?
There are plenty of tutorials on how to save as PNG, but the animation is lost in these cases.
633
Select File > New to display the New Document dialog. Select the Advanced tab from the top of the screen and click the HTML5 Canvas option. This opens a new FLA with Publish Settings modified to produce HTML5 output.
Internet Explorer (IE): In the animation window, open IE's View menu (at the top of the window) and select Source. A Notepad window will open displaying HTML code. In the Notepad window, open the File menu and select Save As. Give the file a suitable name ending in ".
You can create animations with HTML5 by combining HTML, CSS, and JavaScript (JS), with which you can build shapes. Also, you can control animations and edit images, video, and audio by means of JS or CSS elements, all of which you then add to a drawing board, which you set up with the <canvas> element.
There is not an "easy" way to do this.
Here is a similar question... Grabbing each frame of an HTML5 canvas
You could follow this approach and grab the frames and submit these to a server-side script to compile them into an animated GIF.
Another option, though non-trival, would be to implement a pure JavaScript GIF encoder. The GIF specification can be found here, http://graphcomp.com/info/specs/gif89a.txt
If the color table stays the same in each frame, you could probably splice together the frames from already encoded GIF urls without having to compress the pixel level data. You would still need to decode the base64 stream from Canvas.toDataURL.
123
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
