Necesito cargar todos los marcos de un GIF animado en un lienzo HTML5.Extraer cuadros individuales de un GIF animado a lienzo
Tenga en cuenta que no quiero "reproducir" la animación (alguien me preguntó esto antes), todo lo que quiero es extraer todos los marcos para usarlos como imágenes individuales.
Lo sentimos, la respuesta corta es que JavaScript no tiene forma de controlar el marco actual de un GIF Animado.
La respuesta larga es que hay formas de hacer lo que quieras con solo JS, pero son hacks muy intrincados.
Ejemplo de camino de hackeo: cree un lienzo y no lo agregue al DOM (para que no lo vea nadie). En un bucle rápido (setTimeout), dibuja constantemente en este lienzo y recoge instantáneas. Compare el lienzo ImageData para ver si los marcos han cambiado o no.
Sería un mejor uso de su tiempo, probablemente, para ver cómo puede obtener su servidor para dividir aparte para usted (con PHP/Perl/Python/etc)
El camino del hack es inteligente, pero impredecible. Estoy de acuerdo en que si no surgen mejores soluciones de JS, tendré que recurrir a las secuencias de comandos del lado del servidor ... Gracias. – Omiod
Este truco no debería ser posible. 'cuando un objeto CanvasImageSource representa una imagen animada en un elemento HTMLImageElement, el agente de usuario debe usar la imagen predeterminada de la animación (la que el formato define debe usarse cuando la animación no se admite o está deshabilitada) o, si existe no existe tal imagen, el primer cuadro de la animación' https://html.spec.whatwg.org/multipage/scripting.html#dom-context-2d-drawimage#image-sources-for-2d-rendering-contexts – Robert
This la respuesta fue probablemente correcta en ese momento. Pero hoy en día usar libgif-js puede hacer el trabajo, y también es bastante fácil. –
Tome un vistazo a jsgif; descarga un GIF, lo analiza y dibuja los marcos individuales del archivo a <canvas>. Con un poco de excavación debería poder encontrar el código que dibuja los cuadros individuales y trabajar desde allí.
Buzzfeed ha librarified el código del repo tommitytom publicado. No lo he probado todavía pero se ve bien.
puede u por favor ser más específico –
Claro. Usando javascript + canvas, deseo cargar un solo archivo "anim-gif" (que está compuesto por muchos fotogramas), y luego me gustaría usar cada fotograma extraído como imágenes individuales. – Omiod