canvas.toDataURL image/png 报错处理方法推荐
问题背景:
遇到一个需求,要对 的视频进行截图,视频使用video标签来 ,然后点击视频 区域时截取实时的帧图片。
代码很简单如下:
- 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.
经过查阅和分析,发现这个其实是由于视频文件所在的域和图片和页面所在域不同,出现跨域传输的问题。
解决方案:
将视频文件放到页面所在域下。
原文地址:http://blog.csdn.net/luochao_tj/article/details/44942125
上一篇:HTML基础知识——css样式表,样式属性,格式与布局详解
栏 目:CSS/HTML
本文标题:canvas.toDataURL image/png 报错处理方法推荐
本文地址:https://www.xiuzhanwang.com/a1/CSS_HTML/9654.html
您可能感兴趣的文章
阅读排行
本栏相关
- 04-02表格样式css样式,css样式表单
- 04-02好看的字体样式css,好看的字体样式图
- 04-02分页样式css,分页样式jq
- 04-02分页样式css,分页样式栏里用来定义首
- 04-02css样式的引入,css样式怎么引入
- 04-02css滚动条样式,css滚动条的样式
- 04-02css样式引入方式有几种,网页引入css样
- 04-02html中加入css样式的简单介绍
- 04-02vue中的css样式布局,vue添加css样式
- 04-02内嵌样式css,内嵌样式表,内部样式表
随机阅读
- 01-10C++实现将数组中的值反转
- 08-05DEDECMS点击主栏目默认显示第一个子栏
- 08-05dedecms织梦模板编辑文档的同时自动更
- 08-05织梦dedecms首页调用缩略图为背景
- 08-05dedecms织梦模板全站调用收藏数的方法
- 01-10vue实现分页加载效果
- 01-10bat批处理彻底隐藏文件的方法(使用
- 01-11常用的HTML富文本编译器UEditor、CKEdi
- 01-10C语言打印杨辉三角示例汇总
- 01-10C++ 类访问控制的条件总结