Question

我有一个名为“ image”的文件夹，其中包含300张图像，其格式分别为twibbon1001.jpg，twibbon1002.jpg，twibbon1003.jpg，...，twibbon1300.jpg。我想将它们全部转换为30 fps视频。我通过使用whammy的javascript在客户端进行此操作。它不会引发任何错误，但是它不起作用。

index.html

<video id="result" controls autoplay loop></video>
<canvas id="canvas" style="display:none;"></canvas>
<div id="images" style="display:none;"></div>

script.js

function pad (str, max) {
str = str.toString();
return str.length < max ? pad("0" + str, max) : str;
}

var canvas = $("#canvas");
var context = canvas[0].getContext("2d");
var video = new Whammy.Video(30);

var count = 40;
for (var i = 1; i <= count; i++) {
   var index = pad(i, 3);
   var src = "image/twibbon1"+index + ".jpg";
   var id = "img"+index;
   var twibbon = "<img src='" + src + "' id='" + id +"'>";
   $('#images').append(twibbon);

   var curImg = $('#'+id);
   context.globalAlpha = 1;
   context.drawImage(curImg[0], 0, 0);
   video.add(context);
}

var output = video.compile();
console.log(output);
var url = URL.createObjectURL(output);

$('#result').attr('src', url);

我做错了吗？有什么建议吗？我猜问题出在context.drawImage()，但我不确定。

NB：之所以不使用ffmpeg在服务器端执行此操作，是因为我的共享托管不支持ffmpeg

使用Whammy将图像转换为视频

0 个答案: