How To Fix Uncaught DOMException: Failed To Execute ‘toDataURL’ On ‘HTMLCanvasElement’: Tainted Canvases May Not Be Exported

Recently when I use Html5 canvas to capture video screenshots and save the screenshots to an image, it through the error Uncaught DOMException: Failed to execute ‘toDataURL’ on ‘HTMLCanvasElement’: Tainted canvases may not be exported. This article will tell you how to fix it.

1. How To Fix The Uncaught DOMException: Failed to execute ‘toDataURL’ on ‘HTMLCanvasElement’: Tainted canvases may not be exported.

1. Below is the detailed exception error message.

   Uncaught DOMException: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported.
       at captureVideo (file:///Users/songzhao/Documents/WorkSpace/dev2qa.com-example-code/PythonExampleProject/html/canvas/video/html5-canvas-capture-video-webpage-screenshots.js:52:43)
       at HTMLInputElement.onclick (file:///Users/songzhao/Documents/WorkSpace/dev2qa.com-example-code/PythonExampleProject/html/canvas/video/html5-canvas-capture-video-webpage-screenshots.html:21:86)
   captureVideo @ html5-canvas-capture-video-webpage-screenshots.js:52
   onclick @ html5-canvas-capture-video-webpage-screenshots.html:21

2. Below is the javascript source code that will through the exception.

   // get the html video element.
   var video = document.getElementById(videoId);
   
   // draw the video current screenshot to an image.
   canvasCtx.drawImage(video, 0, 0, canvas.width, canvas.height)
   
   // get the image binary string.
   const imgBase64String = canvas.toDataURL("image/png");

3. The error happened in the code line const imgBase64String = canvas.toDataURL(“image/png”);.
4. Finally, I find a way to fix this issue.
5. I should create a local web server for example apache tomcat, and IIS.
6. I just run the python built-in web server by executing the command python -m http.server in a terminal.

   $ python -m http.server
   Serving HTTP on 0.0.0.0 port 8000 (http://0.0.0.0:8000/) ...

7. And then copy the Html file and JS file to the webserver, and browse the Html file with the HTTP URL such as http://localhost:8000/html/canvas/video/html5-canvas-capture-video-webpage-screenshots.html
8. And now the error is fixed.