gpt4 book ai didi

Javascript:动画 GIF 到数据 URI

转载 作者:搜寻专家 更新时间:2023-11-01 04:23:42 24 4
gpt4 key购买 nike

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

...我想将其转换为数据 URI。我需要这样做是因为浏览器缓存图像并且这个图像没有循环,所以为了能够在动画结束并且单元转到另一个图 block 时“再次运行它”,我需要将它转换为数据 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 canvas 的内容,但仍然我只是不知道如何将动画 gif 转换为数据 URI。非常非常欢迎任何帮助!

最佳答案

使用 javascript 无法通过这种兼容所有浏览器的模式读取服务器文件,但我建议您使用 sprites 而不是动画 gif。 Sprite 是一个 png 文件(允许 alpha channel ),所有绘制的帧都是分开的。想象一下那个文件:

Dots sprite

如您所见,这是一张 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 内存过载。

祝你好运。

关于Javascript:动画 GIF 到数据 URI,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33974692/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com