在Javascript中通过图像创建视频

Question

我的链接

https://jsfiddle.net/dineshkanivu/6xs0rxjb/

使用Javascript for循环我试图通过简单的jpeg文件创建视频。 我无法实现这一点，任何帮助都将不胜感激。

这是我的代码：

 var Allimages = ["eardrum0", "eardrum1", "eardrum2", "eardrum3", "eardrum4"];
 var canvas = document.getElementById("video");
 var lengthofImages = Allimages.length-1;

 function imageLoad() { 

    for (var i = 0; i <= lengthofImages; i++) {

        canvas.style.background = "url(" + Allimages[i] + ".bmp)";

    }

}

imageLoad();

Answer 1

您应该在显示下一张图像之前添加延迟，否则您只会看到最后一张

function showImagesLikeVideo(index) {
    if(index < Allimages.length) {
        canvas.style.background = "url(" + Allimages[index] + ".bmp)";
        //show next image with a timeout
        setTimeout(showImagesLikeVideo.bind(null, index + 1), 300);
    }
}

showImagesLikeVideo(0);

对于无限循环，您应该将索引重置为0

function showImagesLikeVideo(index) {
    index = index < Allimages.length ? index : 0;
    canvas.style.background = "url(" + Allimages[index] + ".bmp)";
    //show next image with a timeout
    setTimeout(showImagesLikeVideo.bind(null, index + 1), 300);
}

showImagesLikeVideo(0);