我正在用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);
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.任何帮助都会非常,非常欢迎!
最佳答案
使用兼容所有浏览器的javascript无法通过此模式读取服务器文件,但我建议您使用精灵而不是GIF动画.精灵是一个png文件(允许alpha通道),所有帧都是分开绘制的.想象一下这个文件:
如您所见,它是一张600×150的图像(每帧150×150,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; }
}
这样,您可以调整关键帧,速度,帧数(步数)和最重要的:您不会在浏览器客户端中过载cpu和RAM内存.
祝好运.
原文地址:https://www.jb51.cc/js/428915.html
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。