Canvas 使用gif图像并保存
我尝试将gif图像添加到画布中，添加后，gif是静态的，但当我更改某些其他对象属性时，即dynamic.Text；s setY属性，gif图像移动到动画的另一个步骤 请问，如何将gif图像添加到图层中，然后使用Canvas 使用gif图像并保存,canvas,kineticjs,Canvas,Kineticjs,我尝试将gif图像添加到画布中，添加后，gif是静态的，但当我更改某些其他对象属性时，即dynamic.Text；s setY属性，gif图像移动到动画的另一个步骤 请问，如何将gif图像添加到图层中，然后使用 stage.toDataURL({ callback: function(dataUrl) { //callback }) }); 是否保存为gif图像？或者是否存在任何不同的机制来实现此效果？如果要将第一幅图像保存在动画.gif中，可以将其绘制到屏幕外
stage.toDataURL({
callback: function(dataUrl) {
//callback
})
});
是否保存为gif图像？或者是否存在任何不同的机制来实现此效果？如果要将第一幅图像保存在动画.gif中，可以将其绘制到屏幕外的画布上，然后使用context.getDataURL获取第一幅图像的dataUrl： 示例代码和演示：
这个解决方案看起来不错，但我的项目是由KineticJS实现的，我通过添加到层-var layer=new Kinetic.layer；来添加图像、文本等对象；。最奇怪的是，每当我更改任何对象的任何属性时，移动文本，更改文本。。。gif的动画将改变一步。即使您的项目是在KineticJS中实现的，您也可以始终使用常规html画布元素捕获动画中第一幅图像的dataURL。gif使用其他资源解决问题并不违法！。是的，KineticJS的行为很奇怪，尽管KineticJS不支持动画.gifs，所以我不太确定我会期望什么。干杯-是的，使用其他方法向画布添加元素是最好的解决方案。我想，用画布将gif保存为动画是不可能的。我说的对吗？哦…你是说把.gif文件作为一系列图像播放？当然，那是可以做到的！shachaf编写了一个.gif解析器，您可以使用它来获取动画gif中的每个图像：感谢您链接此库。这对我很有用：谢谢
<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css -->
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<style>
body{ background-color: ivory; }
canvas{border:1px solid red;}
</style>
<script>
$(function(){
var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var img=new Image();
img.crossOrigin="anonymous";
img.onload=start;
img.src="https://dl.dropboxusercontent.com/u/139992952/multple/animated.gif";
function start(){
ctx.drawImage(img,0,0);
var url=canvas.toDataURL();
}
}); // end $(function(){});
</script>
</head>
<body>
<h4>The animated .gif in an img element</h4>
<img src="https://dl.dropboxusercontent.com/u/139992952/multple/animated.gif"><br>
<h4>The animated .gif drawn in a canvas element</h4>
<canvas id="canvas" width=300 height=300></canvas>
</body>
</html>