Запись изображения холста в видеофайл с помощью recordrtc

Я пытаюсь создать анимацию с помощью холста и сохранить ее в виде видеофайла с помощью RecordRTC, этот код работает отлично, но у меня возникают трудности с записью div с изображением.

<div style="display:none;" id="background_goa">
<img src="Http://domain/wp-content/themes/custom/images/top10-bg-goa.png'; ?>" />
</div>

function video_create(){
  var ctx = document.getElementById('canvas').getContext('2d');
  ctx.save();
  ctx.clearRect(0, 0, 150, 150);            
  var img = document.getElementById("background_goa");
  ctx.drawImage(img,100,100);
  // ctx.restore();
  window.requestAnimationFrame(top_video_create);       
}
window.requestAnimationFrame(top_video_create);

var recorder = RecordRTC(canvas, {
  type: 'canvas'
});

recorder.startRecording();

setTimeout(function(){
recorder.stopRecording(function() {
  var blob = recorder.getBlob();
  document.body.innerHTML = '<video controls src="' + URL.createObjectURL(blob) + '" autoplay loop></video>';
 });
}, 5000);

person chandan    schedule 25.06.2017    source источник
comment
Проблема заключалась в ctx.restore(); теперь работает как шарм. Спасибо, мистер Хан.   -  person chandan    schedule 26.06.2017
comment
Пожалуйста, добавьте ответ на эту страницу и отметьте его как решенный. С Уважением   -  person Muaz Khan    schedule 26.06.2017


Ответы (1)


Ошибка заключалась в использовании ctx.restore(); в основном то, что он делает, это восстанавливает весь холст после рисования, его предполагается использовать перед рисованием нового элемента на холсте, чтобы экран был пустым до загрузки следующего кадра.

person chandan    schedule 26.06.2017