Преобразование изображений в видео, используя сглаз - PullRequest
0 голосов
/ 27 августа 2018

У меня есть папка с именем «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

...