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

时间：2021-05-08

问题背景：

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

代码很简单如下：

JavaScript Code复制内容到剪贴板
  • varvideo=document.getElementById('video');
  • varcanvas=document.getElementById('canvas');
  • varctx=canvas.getContext('2d');
  • varimg=document.getElementById('img');
  • functionsnapshot(){
  • 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.

    经过查阅和分析，发现这个其实是由于视频文件所在的域和图片和页面所在域不同，出现跨域传输的问题。

    解决方案：

    将视频文件放到页面所在域下。

    原文地址：http://blog.csdn.net/luochao_tj/article/details/44942125

    声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。如涉及版权问题，请提交至online#300.cn邮箱联系删除。

    相关文章