Javascript: Animowany GIF do URI danych

Question

Piszę grę Open-source Falloutish 2 w PHP + HTML + CSS + JavaScript. Teraz zajmuję się silnikiem. Mam to gif: https://dl.dropboxusercontent.com/u/4258402/nmwarrgb_e.gif

... które chcę przekonwertować na dane URI. Muszę to zrobić, ponieważ przeglądarki przechowują obrazy w pamięci podręcznej, a ta nie jest zapętlona, ​​więc aby móc "uruchomić ponownie" po zakończeniu animacji i przejściu do innego kafelka, muszę przekonwertować go na identyfikator URI danych. W przeciwnym razie byłbym zmuszony do ponownego pobrania obrazu w kółko, np. dodając losowy ciąg do końca pliku obrazu. Co działa dobrze, ale robi dużo za dużo transferu i powoduje opóźnienie.

Jest to kod próbowałem użyć:

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; 
}; 

Niestety produkuje URI danych tylko dla pierwszej klatki. Próbowałem wyszukiwania wtyczek, czytając o płótnie html, ale wciąż Po prostu nie wiem, jak konwertować animowany gif do URI danych. Każda pomoc byłaby bardzo, bardzo mile witana!

Answer 1

Uważam, że nie ma bezpośredniego sposobu na to, używając JavaScript. Używając płótna, musisz narysować na nim każdą klatkę i zakodować je w pliku GIF. Wydaje się to niemożliwe przy użyciu bieżącego interfejsu API, ponieważ nie ma możliwości wyodrębnienia pojedynczych ramek (z wyjątkiem ręcznego analizowania pliku GIF).

Możesz odnieść sukces pobierając binarny plik GIF za pomocą JavaScript (pamiętaj o ograniczeniach między domenami żądań HTTP) i wygeneruj adres URL zakodowany w base64. Na przykład możesz użyć this example, aby uzyskać tablicę Uint8Array, którą następnie możesz convert to a base64 string.

Powinieneś prawdopodobnie rozważyć generowanie adresów URL danych statycznie, bez korzystania z JavaScript. Na przykład, można użyć tej komendy powłoki do generowania danych dla adresu URL pliku gif:

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

Istnieje również szereg usług online, które będą generować adresy danych z plików.

Answer 2

Nie jest to możliwe, gdy javascript odczytuje pliki serwerów w tym trybie z kompatybilnością wszystkich przeglądarek, ale zalecam używanie duszków zamiast animowanych gifów. Sprite to plik png (który pozwala kanałowi alfa) z wszystkimi oddzielonymi ramkami. Wyobraź sobie ten plik:

Jak widać, jest to obraz 600x150 (150x150 każda ramka, 4 klatki). Więc można animować z animacji CSS, takich jak ten:

.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>

Z tym, można ustawić klatki kluczowe, prędkość, ilość klatek (kroków) i najważniejsze: don przeciąża pamięć procesora i pamięci RAM w kliencie przeglądarki.

Powodzenia.