canvas.toDataURL image/png Recommended error handling methods

Problem background:

Encountered a requirement to take screenshots of the played video. The video is played using the video tag, and then the real-time frame picture is captured when the video playback area is clicked.

The code is very simple as follows:

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

Problem tip:

Uncaught SecurityError: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported.

After review and analysis, we found that this is actually due to the fact that the domain where the video file is located is different from the domain where the picture and page are located, resulting in a cross-domain transmission problem.

Solution:

Put the video file under the domain where the page is located.

For more canvas.toDataURL image/png and recommended error handling methods, please pay attention to the PHP Chinese website!