canvas.toDataURL image/png Empfohlene Fehlerbehandlungsmethoden

Problemhintergrund:

Es ist eine Anforderung aufgetreten, Screenshots des abgespielten Videos zu machen. Das Video wird mit dem Video-Tag abgespielt und dann wird das Echtzeitbild erfasst, wenn auf den Videowiedergabebereich geklickt wird.

Der Code ist sehr einfach wie folgt:

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

Problemtipp:

Uncaught SecurityError: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted Canvases may not exportiert werden.

Nach Überprüfung und Analyse wurde festgestellt, dass dies tatsächlich daran liegt, dass sich die Domäne, in der sich die Videodatei befindet, von der Domäne unterscheidet, in der sich das Bild und die Seite befinden, was zu einem Problem bei der domänenübergreifenden Übertragung.

Lösung:

Fügen Sie die Videodatei unter der Domain der Seite ein.

Weitere Informationen zu canvas.toDataURL image/png und empfohlenen Fehlerbehandlungsmethoden finden Sie auf der chinesischen PHP-Website für verwandte Artikel!