Question

我正在用PHP + HTML + CSS + JavaScript编写开源的Falloutish 2游戏。现在正在处理引擎。我有这个gif： https://dl.dropboxusercontent.com/u/4258402/nmwarrgb_e.gif

...我想将其转换为数据URI。我需要这样做，因为浏览器缓存图像并且这个没有循环，所以为了能够再次运行它＃34;当动画结束并且单位转到另一个图块时，我需要将其转换为数据URI。否则我将被迫一遍又一遍地重新下载图片，例如通过将随机字符串添加到图像文件的末尾。哪种方法工作正常，但过多的转移并导致滞后。

这是我尝试使用的代码：

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

不幸的是，它仅为第一帧生成数据URI。我已经尝试过搜索插件，阅读有关html画布的内容，但仍然我只是不知道如何将动画gif转换为数据URI 。任何帮助都会非常非常欢迎！

Answer 1

使用兼容所有浏览器的javascript无法通过此模式读取服务器文件，但我建议您使用精灵而不是GIF动画。精灵是一个png文件（允许alpha通道），所有帧都是分开绘制的。想象一下这个文件：

如您所见，它是一张600x150的图像（每帧150x150,4帧）。所以你可以用这样的CSS动画制作动画：

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

通过这种方式，您可以调整关键帧，速度，帧数（步数）以及最重要的：您不会在浏览器客户端中过载CPU和RAM内存。

祝你好运。

Answer 2

我相信使用JavaScript没有直接的方法。使用画布，您必须在其上绘制每个帧并将其编码为GIF文件。使用当前API似乎是不可能的，因为无法提取单个帧（除非通过手动解析GIF文件）。

使用JavaScript下载二进制GIF文件（记住HTTP请求的跨域限制）并生成base64编码的数据URL可能会成功。例如，您可以使用this example获取Uint8Array，然后可以convert to a base64 string。

您应该考虑静态生成数据URL，而不是使用JavaScript。例如，您可以使用此shell命令为您的gif文件生成数据URL：

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

还有许多在线服务可以从文件中生成数据URL。

Javascript：动画GIF到数据URI

2 个答案: