Javascript: GIF animata all'URI dei dati

Question

Sto scrivendo il gioco Falloutish 2 open-source in PHP + HTML + CSS + JavaScript. In questo momento si occupa del motore. Ho questa gif: https://dl.dropboxusercontent.com/u/4258402/nmwarrgb_e.gif

... che voglio convertire in URI di dati. Ho bisogno di farlo perché i browser nascondono le immagini e questo non è in loop, quindi per essere in grado di "eseguirlo di nuovo" quando l'animazione termina e l'unità va in un'altra tessera, ho bisogno di convertirla in URI di dati. Altrimenti sarei costretto a scaricare nuovamente l'immagine più e più volte, ad es. aggiungendo una stringa casuale alla fine del file immagine. Che funziona bene, ma richiede troppo trasferimento e causa lag.

Questo è il codice ho provato ad utilizzare:

var image = new Image(); 

    (..) 

    this.convertImageObjectToDataURI = function (image) { 
       var canvasTemp = document.createElement('canvas'); 
       canvasTemp.width = image.naturalWidth; // or 'width' if you want a special/scaled size 
       canvasTemp.height = image.naturalHeight; // or 'height' if you want a special/scaled size 

       canvasTemp.getContext('2d').drawImage(image, 0, 0); 

       var dataUri = canvasTemp.toDataURL('image/gif'); 

       // Modify Data URI beginning 
       dataUri = "data:image/gif;" + dataUri.substring(15); 
       console.log(dataUri); 

       // Return image as Data URI 
       return dataUri; 
}; 

Purtroppo produce URI dati solo per il primo fotogramma. Ho provato a cercare i plug-in, a leggere su tela HTML, ma sono ancora Non so come convertire il GIF animato nell'URI dei dati. Qualsiasi aiuto sarebbe molto, molto benvenuto!

Answer 1

Credo non ci sia un modo diretto per farlo utilizzando JavaScript. Usando una tela, dovresti disegnare ogni singolo fotogramma su di esso e codificarlo in un file GIF. Questo sembra impossibile usando l'API corrente in quanto non c'è modo di estrarre i singoli frame (tranne l'analisi manuale del file GIF).

È possibile riuscire a scaricare il file GIF binario utilizzando JavaScript (ricordare le restrizioni tra domini di richieste HTTP) e generare un URL di dati con codifica Base64. Ad esempio, è possibile utilizzare this example per ottenere un Uint8Array che è quindi possibile convert to a base64 string.

Probabilmente si dovrebbe considerare di generare gli URL di dati in modo statico, non utilizzando JavaScript. Ad esempio, è possibile utilizzare questo comando di shell per generare l'URL dei dati per il file GIF:

echo "data:image/gif;base64,"`curl --silent 'https://dl.dropboxusercontent.com/u/4258402/nmwarrgb_e.gif' | base64 --wrap=0` 

C'è anche una serie di servizi on-line che genereranno gli URL di dati da file.

Answer 2

Non è possibile con javascript leggere i file del server con questa modalità con la compatibilità di tutti i browser, ma ti consiglio di utilizzare sprite invece di gif animate. Uno sprite è un file png (che consente il canale alfa) con tutti i frame separati. Immaginate quel file:

Come si può vedere, si tratta di un'immagine 600x150 (150x150 ogni fotogramma, 4 fotogrammi). Così è possibile animare con le animazioni CSS come questo:

.dots { 
 
    width: 150px; 
 
    height: 150px; 
 
    background-image: url(http://i.stack.imgur.com/bCHFq.png); 
 
    
 
    -webkit-animation: play .4s steps(4) infinite; 
 
     -moz-animation: play .4s steps(4) infinite; 
 
     -ms-animation: play .4s steps(4) infinite; 
 
     -o-animation: play .4s steps(4) infinite; 
 
      animation: play .4s steps(4) infinite; 
 
} 
 

 
@-webkit-keyframes play { 
 
    from { background-position: 0px; } 
 
    to { background-position: -600px; } 
 
} 
 

 
@-moz-keyframes play { 
 
    from { background-position: 0px; } 
 
    to { background-position: -600px; } 
 
} 
 

 
@-ms-keyframes play { 
 
    from { background-position: 0px; } 
 
    to { background-position: -600px; } 
 
} 
 

 
@-o-keyframes play { 
 
    from { background-position: 0px; } 
 
    to { background-position: -600px; } 
 
} 
 

 
@keyframes play { 
 
    from { background-position: 0px; } 
 
    to { background-position: -600px; } 
 
}

<div class="dots"></div>

Con questo, è possibile regolare i fotogrammi chiave, la velocità, il numero di frame (passi), e la più importante: don sovraccaricare la CPU e la memoria RAM nel client del browser.

Buona fortuna.