Javascript:动画GIF到数据URI

Question

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

...我想转换为数据URI.我需要这样做,因为浏览器缓存图像并且这个没有循环,所以为了能够在动画结束并且单元转到另一个图块时"再次运行",我需要将其转换为数据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 文件。使用当前的 API 这似乎是不可能的，因为无法提取单个帧（除非手动解析 GIF 文件）。

您可以通过使用 JavaScript 下载二进制 GIF 文件（记住 HTTP 请求的跨域限制）并生成 Base64 编码的数据 URL 来成功。例如，您可以使用此示例获取 Uint8Array，然后将其转换为 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。