我正在做一个项目，我使用 getUserMedia 从网络摄像头创建一组 png 图像数据。 我现在正尝试将此数组转换为一个动画 gif。
提前致谢
PS:我只想使用纯 javascript，但如果我需要一个外部库，我会使用一个 demo代码:
<!Doctype html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>getUserMedia API - jsFiddle demo by Vulpus</title>
<script type="text/javascript" src="LZWEncoder.js"></script>
<script type="text/javascript" src="NeuQuant.js"></script>
<script type="text/javascript" src="GIFEncoder.js"></script>
<script type="text/javascript" src="b64.js"></script>
</head>
<body>
<title>RecorderGif</title>
<header>
<h1>getUserMedia</h1>
</header>
<article>
<video id="video" width="320" height="200" style="display:none" autoplay=""></video>
<section>
<button id="btnStart">Start video</button>
<button id="btnStop">Stop video</button>
<button id="btnSave">Download</button>
</section>
<canvas id="canvas" width="320" height="240"></canvas>
</article>
<script type="text/javascript">//<![CDATA[
var encoder = new GIFEncoder();
encoder.setRepeat(0);
encoder.setDelay(250);
encoder.start();
window.onload = function() {
//Compatibility
navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia;
var data = []
var canvas = document.getElementById("canvas"),
context = canvas.getContext("2d"),
video = document.getElementById("video"),
btnStart = document.getElementById("btnStart"),
btnStop = document.getElementById("btnStop"),
btnSave = document.getElementById("btnSave")
videoObj = {
video: true,
};
btnStart.addEventListener("click", function() {
var localMediaStream;
if (navigator.getUserMedia) {
navigator.getUserMedia(videoObj, function(stream) {
video.src = (navigator.webkitGetUserMedia) ? window.webkitURL.createObjectURL(stream) : stream;
localMediaStream = stream;
var addFrame = setInterval(function() {
data.push(canvas.toDataURL('image/png'))
},100);
}, function(error) {
console.error("Video capture error: ", error.code);
});
btnStop.addEventListener("click", function() {
localMediaStream.stop();
clearInterval(addFrame)
});
btnSave.addEventListener("click", function() {
for (var i = 0; i < data.length; i++) {
var frame = new Image();
frame.src=data[i]
context.drawImage(frame,0,0)
encoder.addFrame(context);
setTimeout(function(){},100)
};
encoder.finish();
var binary_gif = encoder.stream().getData() //notice this is different from the as3gif package!
var data_url = 'data:image/gif;base64,'+encode64(binary_gif);
window.location.href=data_url;
});
setInterval(function() {context.drawImage(video, 0, 0, 320, 240)},100);
}
});
};
//]]>
</script>
</body>
</html>
最佳答案
您不能使用 Canvas 原生创建 GIF，但您可以使用名为 JSGif 的库来执行此操作:
https://github.com/antimatter15/jsgif
来自自述文件:
现在我们需要初始化 GIFEncoder。
var encoder = new GIFEncoder();
如果是制作gif动画，需要添加以下内容
encoder.setRepeat(0); //0 -> loop forever
//1+ -> loop n times then stop
encoder.setDelay(500); //go to next frame every n milliseconds
现在，您需要告诉神奇的事情您将开始插入帧(即使它只有一个)。
encoder.start();
对于移植时间最长的部分:添加一个真实的框架。
encoder.addFrame(context);
有关更多详细信息，请查看其文档。
关于javascript - 从 png 数据数组创建动画 gif，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/21507679/