Bezdepbonusu7Программирование: статьи и ответы

Вопрос

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

Автор вопроса: chandanОтветов: 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);
  • Проблема заключалась в ctx.restore(); теперь работает как шарм. Спасибо, мистер Хан. chandan 26.06.2017
  • Пожалуйста, добавьте ответ на эту страницу и отметьте его как решенный. С Уважением Muaz Khan 26.06.2017

javascriptcanvashtmlhtml5-canvasrecordrtc

Ответы

Ответ 1 · chandan

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

Перевод вопроса и ответов сообщества Stack Overflow, лицензия CC BY-SA. Оригинал на Stack Overflow.

Похожие материалы