您现在的位置是：网站首页> 编程资料编程资料

canvas.toDataURL image/png 报错处理方法推荐详解canvas.toDataURL()报错的解决方案全都在这了关于canvas.toDataURL 在iOS运行失败的问题解决

2023-10-09 345人已围观

简介下面小编就为大家带来一篇canvas.toDataURL('image/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.

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

解决方案：

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

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

上一篇：详解HTML中table表格的frame和rules属性html中table表格的内容水平和垂直居中显示Div+CSS对HTML的table表格定位用法实例深入解析HTML的table表格标签与相关的换行问题html 隐藏div HTML里隐藏表格TABLE或者DIV内容的css样式HTML table表格边框的控制详细说明HTML的dl、dt、dd标记制作表格对决Table制作表HTML table 表格边框的实现思路

下一篇：HTML基础重点_一般标签、常用标签和表格html/css基础篇——html代码编写过程中的几个警惕点(必看)html、css基础注意点(前端必看篇)HTML CSS样式基础(必看篇)HTML基础总结推荐(段落)HTML基础知识——css样式表,样式属性,格式与布局详解HTML基础知识——设置超链接的样式简单实例HTML基础必看——全面了解css样式表HTML基础必看---表单,图片热点,网页划区和拼接详解浅谈HTML（css基础样式）前端开发每天必学之HTML入门介绍

相关内容

点击排行

本栏推荐

猜你喜欢

-六神源码网