Recommendation of Canvas.toDataURL image/png error handling method


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’);   
  3. var canvas = document.getElementById(‘canvas’);   
  5. var ctx = canvas.getContext(‘2d’);   
  7. var img = document.getElementById(‘img’);   
  9. function snapshot() {   
  10.    ctx.drawImage(video,0,0);   
  11.    img.src =  canvas.toDataURL(‘image/png);   
  12. }   
  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.


Place the video file in the domain of the page.

Original address:

Recommended Today

Implementation of PHP Facades

Example <?php class RealRoute{ public function get(){ Echo’Get me’; } } class Facade{ public static $resolvedInstance; public static $app; public static function __callStatic($method,$args){ $instance = static::getFacadeRoot(); if(!$instance){ throw new RuntimeException(‘A facade root has not been set.’); } return $instance->$method(…$args); } // Get the Facade root object public static function getFacadeRoot() { return static::resolveFacadeInstance(static::getFacadeAccessor()); } protected […]