Enregistrement de l'image de canevas en fichier vidéo en utilisant recordrtc

Question

J'essaye de créer une animation en utilisant canvas et en l'enregistrant sous forme de fichier vidéo en utilisant RecordRTC, ce code fonctionne parfaitement, mais j'ai des difficultés à obtenir la div avec image à enregistrer.

<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); 

Answer 1

L'erreur consistait à utiliser ctx.restore(); En fait, ce qu'il fait est de restaurer la totalité de la toile après le tirage au sort, c'est supposé être utilisé avant de dessiner le nouvel élément sur toile, de sorte que l'écran est vide avant le chargement de l'image suivante.