从 png 数据数组创建动画 gif答案

【问题标题】：Create animated gif from array of png data从 png 数据数组创建动画 gif
【发布时间】：2014-02-25 18:39:31
【问题描述】：

我正在做一个项目，我正在使用 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>

【问题讨论】：

标签： javascript canvas png gif getusermedia

【解决方案1】：

您无法使用画布本地创建 GIF，但您可以使用名为 JSGif 的库来执行此操作：
https://github.com/antimatter15/jsgif

来自自述文件：

现在我们需要初始化 GIFEncoder。

var encoder = new GIFEncoder();

如果是制作动图，需要添加以下内容

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);

有关更多详细信息，请查看其文档。

【讨论】：

很遗憾，这使用了 flash，我希望在移动和桌面上获得支持
@Vulpus 它不使用闪存；它是 from 闪存代码的端口，这就是您看到 AS/flash 引用的原因，但此版本是纯 JavaScript 代码。 :-)