前段时间做一个项目,需求是对每一个视频增加预览图,这个题目终究挑选计划是:
用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.
怎样修正都不起作用,终究发明:
这个实际上是因为视频文件地点的域和图片和页面地点域差别,涌现跨域传输的题目。