Recommendation of Canvas.toDataURL image/png error handling method

Time:2019-8-11

Background of the problem:

To meet a requirement, we need to take a screenshot of the playing video. The video is played with the video tag, and then click on the video playing area to intercept the real-time frame picture.

The code is simple as follows:

JavaScript CodeCopy content to clipboard
  1. var video = document.getElementById(‘video’);   
  2.   
  3. var canvas = document.getElementById(‘canvas’);   
  4.   
  5. var ctx = canvas.getContext(‘2d’);   
  6.   
  7. var img = document.getElementById(‘img’);   
  8.   
  9. function snapshot() {   
  10.    ctx.drawImage(video,0,0);   
  11.    img.src =  canvas.toDataURL(‘image/png);   
  12. }   
  13.   
  14. video.addEventListener(‘click’, snapshot, false);   

Question Tips:

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

After consulting and analyzing, it is found that this is actually due to the different domains of video files and images and pages, resulting in the problem of cross-domain transmission.

Solution:

Place the video file in the domain of the page.

Original address: http://blog.csdn.net/luochao_tj/article/details/44942125