javascript - 使用 Javascript 将图像序列转换为视频

Question

我有 7 张图片，每张图片有 25 帧。我需要做的是逐帧浏览每个图像并将其显示为视频，可以通过播放、暂停和停止按钮控制。

我能做的是制作一个视频播放器，我可以轻松地导入视频并在其中播放、暂停、停止。我已经设计好了，但不知道如何从图像列表制作视频。

您可以在这些 URL 中查看图像:

- http://storage.googleapis.com/alyo/assignments/images/0.jpg - http://storage.googleapis.com/alyo/assignments/images/6.jpg

我们将不胜感激。

Answer 1

您可以使用 javscript setTimeout() 方法和像这样的 div 元素来实现它:

var left = 0;
            var top = 0;
            var minLeft = -512;
            var minBottom = -288;
            var xDecrement = 128;
            var yDecrement = 72;
            var myImage = document.getElementById("myImage");
            var imgIndex = 0;
            let imageList = ['http://storage.googleapis.com/alyo/assignments/images/0.jpg','http://storage.googleapis.com/alyo/assignments/images/6.jpg'];
            var playbackStates = {"INIT":0, "RUNNING": 1 , "PAUSE":2};
            var activeState = playbackStates.INIT;
    
            myImage.style.backgroundPositionX = "0px";
            myImage.style.backgroundPositionY = "0px";
            var timerHandler = null;
            var play = function(){
                
                if(timerHandler){
                    clearTimeout(timerHandler);
                    if(activeState === playbackStates.PAUSE){
                        return;
                    }
                }
    
                timerHandler = setTimeout(function(){
                    let pos =parseFloat(myImage.style.backgroundPositionX.replace("px",""));
                    myImage.style.backgroundPositionX = ( pos - xDecrement) + "px";  
                    if(pos <= -512){
                        myImage.style.backgroundPositionX ="0px";
                        pos =parseFloat(myImage.style.backgroundPositionY.replace("px",""));
                        myImage.style.backgroundPositionY = ( pos - yDecrement) + "px";
                        if(pos <= -288){
                            myImage.style.backgroundPositionY = "0px";
                            imgIndex ++;
                            if(imageList.length <= imgIndex) return;
                            myImage.style.backgroundImage = "url("+imageList[imgIndex]+")";
                        }
                    }
                    play();
                }, 160)
            
            };
            
            myImage.style.backgroundImage = "url("+imageList[imgIndex]+")";
            play();
            activeState = playbackStates.RUNNING;
            
            function pause(){
                activeState = playbackStates.PAUSE;
            }
    
            function resume(){
                activeState = playbackStates.RUNNING;
                play();
            }

<div style="width:128px;height:72px;" id="myImage"></div>
<input type="button" onclick="pause()" value="Pause"/>
<input type="button" onclick="resume()" value="Resume"/>

您可以将所有图片 url 添加到“imageList”数组中，还可以通过修改超时间隔来调整速度。