Comment gérer l'erreur image/png canvas.toDataURL

Cette fois, je vais vous expliquer comment gérer l'erreur canvas.toDataURL image/png Quelles sont les précautions lors du traitement de l'erreur canvas.toDataURL image/png. Voici un cas pratique, jetons un coup d'oeil.

Contexte du problème :

a rencontré la nécessité de prendre une capture d'écran de la vidéo en cours de lecture. Utilisez la balise vidéo pour lire la vidéo, puis capturez la vidéo en temps réel. en cliquant sur la zone de lecture vidéo. CadreImage.

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.

Je pense que vous maîtrisez les méthodes après avoir lu ces cas. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture connexe :

Comment rendre le contenu d'une page Web mobile adaptatif

Comment gérer le débordement de contenu dans les tableaux

Comment obtenir le nombre de mots restants dynamiques de la zone de texte

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!