canvas.toDataURL image/png Méthodes de gestion des erreurs recommandées

Contexte du problème :

Il est nécessaire de prendre des captures d'écran de la vidéo lue. La vidéo est lue à l'aide de la balise vidéo, puis l'image en temps réel est capturée lorsque l'on clique sur la zone de lecture vidéo.

Le code est très simple comme suit :

var video = document.getElementById('video');   
  
var canvas = document.getElementById('canvas');   
  
var ctx = canvas.getContext('2d');   
  
var img = document.getElementById('img');   
  
function snapshot() {   
   ctx.drawImage(video,0,0);   
   img.src =  canvas.toDataURL('image/png');   
}   
  
video.addEventListener('click', snapshot, false);

Astuce relative au problème :

Uncaught SecurityError : échec de l'exécution de 'toDataURL' sur 'HTMLCanvasElement' : les canevas contaminés peuvent ne pas être exporté.

Après examen et analyse, il a été constaté que cela est en fait dû au fait que le domaine où se trouve le fichier vidéo est différent du domaine où se trouvent l'image et la page, ce qui entraîne un problème de transmission inter-domaines.

Solution :

Mettez le fichier vidéo sous le domaine de la page.

Pour plus d'images/png canvas.toDataURL et les méthodes de gestion des erreurs recommandées, veuillez faire attention au site Web PHP chinois pour les articles connexes !