У меня есть папка с именем «image», содержащая 300 изображений, названных в формате twibbon1001.jpg, twibbon1002.jpg, twibbon1003.jpg, ..., twibbon1300.jpg. Я хочу преобразовать их в видео 30 кадров в секунду. Я делаю это на стороне клиента с помощью JavaScript, используя whammy . Не выдает никакой ошибки, но не работает.
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()
, но я не уверен.
Примечание: причина, по которой я не делаю это на стороне сервера при использовании ffmpeg, заключается в том, что мой общий хостинг не поддерживает ffmpeg