canvas.toDataURLimage/png报错处理方法推荐

问题背景：

遇到一个需求，要对播放的视频进行截图，视频使用video标签来播放，然后点击视频播放区域时截取实时的帧图片。

代码很简单如下：

 
 JavaScript Code  复制内容到剪贴板 

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


 问题提示： 
Uncaught SecurityError: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported.
经过查阅和分析，发现这个其实是由于视频文件所在的域和图片和页面所在域不同，出现跨域传输的问题。
 解决方案： 
将视频文件放到页面所在域下。

      
查看更多关于canvas.toDataURLimage/png报错处理方法推荐的详细内容...
        

          
声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://www.haodehen.cn/did37536