canvas.toDataURL('image/png')报错处理方法

最新推荐文章于 2024-03-13 09:43:29 发布

weixin_34356138

最新推荐文章于 2024-03-13 09:43:29 发布

阅读量1.7k

点赞数

文章标签：移动开发 javascript php ViewUI

原文链接：https://segmentfault.com/a/1190000009867773

版权

前段时间做一个项目，需求是对每个视频添加预览图，这个问题最终选择方案是：
用canvas.toDataYRL();来做转换获取视频的一个截图，添加到页面中，达到自动添加预览图的目的。
部分代码如下：

var testVideo = document.getElementById('my_video');
var canvas = document.createElement('canvas');
var context = canvas.getContext('2d');

var timer = setTimeout(function() {
    context.drawImage(testVideo, 0, 0, 640, 500);
    var imgURL = canvas.toDataURl('image/jpeg', 1.0);
    
    //测试一下
    console.log(imgURL);
    }, 1000);

但是开发过程中遇到一个问题，在测试的时候总是提示：
Uncaught SecurityError: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported.
怎么修改都不起作用，最终发现：
这个其实是由于视频文件所在的域和图片和页面所在域不同，出现跨域传输的问题。