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

1

Я пытаюсь создать анимацию с использованием холста и сохранить его в качестве видеофайла с помощью 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);
  • 1
    Проблема была в ctx.restore (); теперь работает как шарм. Спасибо мистер Хан.
  • 0
    Пожалуйста, добавьте ответ на эту страницу и отметьте как "решено". С уважением
Теги:
canvas
html5-canvas
recordrtc

1 ответ

0

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

Ещё вопросы

Сообщество Overcoder
Наверх
Меню