欢迎来到入门教程网!

CSS/HTML

当前位置:主页 > 网页制作 > CSS/HTML >

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

来源:本站原创|时间:2020-01-10|栏目:CSS/HTML|点击:

问题背景:

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

代码很简单如下:

JavaScript Code复制内容到剪贴板
  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);   

问题提示:

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

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

解决方案:

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

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

上一篇:HTML基础知识——css样式表,样式属性,格式与布局详解

栏    目:CSS/HTML

下一篇:关于html水平垂直居中的问题小结

本文标题:canvas.toDataURL image/png 报错处理方法推荐

本文地址:https://www.xiuzhanwang.com/a1/CSS_HTML/9654.html

您可能感兴趣的文章

网页制作CMS教程网络编程软件编程脚本语言数据库服务器

如果侵犯了您的权利,请与我们联系,我们将在24小时内进行处理、任何非本站因素导致的法律后果,本站均不负任何责任。

联系QQ:835971066 | 邮箱:835971066#qq.com(#换成@)

Copyright © 2002-2020 脚本教程网 版权所有