Javascript: Animated GIF for Data URI

Question

I am writing an open source Falloutish 2 game in PHP + HTML + CSS + JavaScript. Right now, dealing with an engine. I have this gif: https://dl.dropboxusercontent.com/u/4258402/nmwarrgb_e.gif

... which I want to convert to a data URI. I need to do this because browsers cache images, and this one does not loop, therefore, in order to be able to “start it again” when the animation ends and the block goes to another plate, I need to convert it to a data URI. Otherwise, I would have to reload the image again and again, for example. adding a random line to the end of the image file. Which works well, but it transfers the gear too much and causes a lag.

This is the code I tried to use:

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

Unfortunately, it only creates data URIs for the first frame. I tried searching for plugins, read about html canvas, but still I just don't know how to convert an animated gif to a data URI . Any help would be very, very appreciated!

Answer 1

It is not possible with javascript to read server files in this mode with compatibility of all browsers, but I recommend using sprites instead of animated gifs. A sprite is a png file (which allows the alpha channel) with all frames selected. Imagine the file:

As you can see, this image is 600x150 in size (150x150 each frame, 4 frames). Thus, you can animate the CSS animation as follows:

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

With this, you can configure key frames, speed, number of frames (steps), and most importantly: you do not overload the processor and RAM in the browser client.

Good luck.

Answer 2

I believe there is no direct way to do this using JavaScript. Using a canvas, you will have to draw each individual frame on it and encode them into a GIF file. This seems impossible using the current API, since there is no way to extract individual frames (other than manually parse the GIF file).

You may be able to load the binary GIF file using JavaScript (remember the cross-domain limitations of HTTP requests) and generate the base64 encoded data URL. For example, you can use this example to get a Uint8Array, which you can then convert to a base64 string .

You should probably put static data urls and not use JavaScript. For example, you can use this shell command to create a data URL for your gif file:

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

There are also a number of online services that will generate data URLs from files.