2011-11-21 23 views
5

¿Es posible dar al usuario final la capacidad de guardar como un único archivo una animación creada en el lado del cliente con HTML5 Canvas, aparte de guardar todo el código HTML de la página?Guardar una animación creada con HTML5 Canvas

Hay muchos tutoriales sobre cómo guardar como PNG, pero la animación se pierde en estos casos.

Respuesta

2

No hay una manera "fácil" de hacerlo.

Aquí es una pregunta similar ... Grabbing each frame of an HTML5 canvas

Usted puede seguir este enfoque y apoderarse de los marcos, y remitirlos a un script del lado del servidor para compilarlos en un GIF animado.

Otra opción, aunque no trivial, sería implementar un codificador GIF de JavaScript puro. La especificación GIF se puede encontrar aquí, http://graphcomp.com/info/specs/gif89a.txt

Si la tabla de colores se mantiene igual en cada fotograma, probablemente podría empalmar los fotogramas de las URL GIF ya codificadas sin tener que comprimir los datos de nivel de píxeles. Aún necesitaría decodificar la transmisión base64 desde Canvas.toDataURL.

2

Puede usar mjbuilder, es una biblioteca que le permite guardar marcos de lienzo en un archivo mpeg. Pero tiene problemas y solo funciona en Firefox.

http://ushiroad.com/mjpeg/

+0

Hoy se requiere en esa biblioteca y por eso lo arreglo para navegadores modernos: https://github.com/theshock/VideoBuilder – Shock