Maison  >  Article  >  interface Web  >  canvas.toDataURL image/png Méthodes de gestion des erreurs recommandées

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

高洛峰
高洛峰original
2017-02-22 11:20:241796parcourir

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 !

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn