Ho bisogno di caricare tutti i fotogrammi di una GIF animata su una tela HTML5.Estrazione di singoli fotogrammi da una GIF animata su tela
Si prega di notare, non voglio a "giocare" il film d'animazione (qualcuno ha chiesto questo prima), tutto quello che voglio è quello di estrarre tutti i fotogrammi per utilizzarli come singole immagini.
Spiacenti, la risposta breve è che JavaScript non ha modo di controllare il fotogramma corrente di un GIF animato.
La risposta lunga è che ci sono una sorta-di modi per fare ciò che si vuole con un solo JS, ma sono molto hack contorte.
Esempio di modo hacker: Creare una tela e non aggiungere al DOM (quindi questo non sarà visto da nessuno). In un ciclo veloce (setTimeout), pesca costantemente su questa tela e raccogli istantanee. Confronta la tela ImageData per vedere se i frame sono cambiati o meno.
Sarebbe un uso migliore del vostro tempo, probabilmente, per vedere come si può ottenere il vostro server per dividere a parte per voi (con PHP/Perl/Python/etc)
La via hackish è intelligente, ma imprevedibile. Sono d'accordo sul fatto che se non escono soluzioni JS migliori, dovrò ricorrere allo scripting lato server ... Grazie. – Omiod
Questo trucco non dovrebbe essere possibile. 'quando un oggetto CanvasImageSource rappresenta un'immagine animata in un HTMLImageElement, l'interprete deve utilizzare l'immagine predefinita dell'animazione (quella che il formato definisce deve essere usata quando l'animazione non è supportata o è disabilitata), o, se c'è nessuna immagine di questo tipo, il primo fotogramma dell'animazione https://html.spec.whatwg.org/multipage/scripting.html#dom-context-2d-drawimage#image-sources-for-2d-rendering-contexts – Robert
Questo la risposta era probabilmente corretta al momento. Ma oggi usare libgif-js può portare a termine il lavoro, ed è piuttosto facile. –
Date un'occhiata a jsgif; scarica una GIF, la analizza e disegna i singoli fotogrammi del file su <canvas>. Con un po 'di scavo dovresti essere in grado di trovare il codice che disegna i singoli fotogrammi e lavorare da lì.
Buzzfeed hanno librarified il codice dal repo tommitytom postato. Non l'ho ancora provato ma sembra buono.
can u si prega di essere più specifico –
Certo. Usando javascript + canvas, desidero caricare un singolo file "anim-gif" (composto da molti frame), quindi vorrei utilizzare ogni singolo frame estratto come singole immagini. – Omiod