在Javascript中创建图像视频

Create Video by Images in Javascript

本文关键字:图像 视频 创建 Javascript      更新时间:2023-09-26

我的链接

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

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

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