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

  发布时间:2016-05-12 18:23:03   作者:佚名   我要评论
下面小编就为大家带来一篇canvas.toDataURL('image/png')报错处理方法推荐。小编觉得挺不错的,现在分享给大家,也给大家做个参考,一起跟随小编过来看看吧

GPT4.0+Midjourney绘画+国内大模型 会员永久免费使用!
如果你想靠AI翻身,你先需要一个靠谱的工具!

问题背景:

遇到一个需求,要对播放的视频进行截图,视频使用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

蓄力AI

相关文章

  • 详解canvas.toDataURL()报错的解决方案全都在这了

    这篇文章主要介绍了详解canvas.toDataURL()报错的解决方案全都在这了,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随
    2020-03-31
  • 关于canvas.toDataURL 在iOS运行失败的问题解决

    这篇文章主要介绍了关于canvas.toDataURL 在iOS运行失败的问题解决,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着
    2020-09-16

最新评论