canvas+video实现跨域视频截图

这两天在使用canvas+video实现视频截图的时候因为视频是外网地址，所以获取截图数据时会报

Uncaught DOMException: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported.

var img = new Image;
img.onload = myLoader;
img.crossOrigin = 'anonymous'; //可选值：anonymous，*

在这一步的时候做，我做了各种测试发现都不成，最后我发现只要在创建视频的时候加上

videoElem.useCORS=true;//解决跨域
videoElem.crossOrigin="Anonymous";//解决跨域

即可
接下来附上完整代码，让大家少走点坑

<div id="videoDivId" ></div>
<canvas id="${videoId}icanvas" width="320" height="570" style="display:none;"></canvas>
<div id="output"></div>
<button class="layui-btn" id="drawImgBut" >截图</button>
<script
src="http://code.jquery.com/jquery-3.4.1.js"
integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU="
crossorigin="anonymous"></script>
<script type="text/javascript">
var videoElem;
var videoDiv;
//创建视频播放
function createVideo(){
videoElem=document.createElement("video");//创建video
videoElem.width="320";
videoElem.height="570";
videoElem.controls=true;
videoElem.useCORS=true;//解决跨域
videoElem.crossOrigin="Anonymous";// 这两个参数必填 解决跨域
videoElem.autoplay=false;
videoDiv=document.getElementById("videoDivId");//获取video的外层容器
videoDiv.appendChild(videoElem);
videoElem.setAttribute('src',"你的视频地址");
}
//定时切图
function drawvideo(){
icanvas=document.getElementById("${videoId}icanvas");
var context=icanvas.getContext("2d");//第一个复制video的画布
context.drawImage(videoElem,0,0,videoElem.width,videoElem.height);
}
//将图片转换成Blob
function dataURItoBlob(base64Data) {
var byteString;
if (base64Data.split(',')[0].indexOf('base64') >= 0)
byteString = atob(base64Data.split(',')[1]);
else
byteString = unescape(base64Data.split(',')[1]);
var mimeString = base64Data.split(',')[0].split(':')[1].split(';')[0];
var ia = new Uint8Array(byteString.length);
for (var i = 0; i < byteString.length; i++) {
ia[i] = byteString.charCodeAt(i);
}
return new Blob([ia], {
type: mimeString
});
}
//截图
function drawimg(){
var firstcanvas=document.getElementById("${videoId}icanvas");
var img = new Image();
var imgBs64 = firstcanvas.toDataURL("image/jpeg");
img.src = imgBs64;
imgFile = dataURItoBlob(imgBs64);//该数据为图片数据，可直接上传服务器
output.innerHTML = "";
output.appendChild(img);//显示截图
}

window.onload=function(){
createVideo();
setInterval(drawvideo,100);
if(parent.isAutoVideo){
setTimeout(function(){drawimg();},1500)
}
var clickbtn=document.getElementById('drawImgBut');
clickbtn.onclick=function(){
drawimg();
};
}
</script>

这这里是一个弹框所以没有写html body 我已经做了修改 加上视频地址就可以独立运行了。

最后说一句，调试过程中经常会遇到修改了js代码不生效的情况，清空缓存和强制刷新多试几次。

• 点赞
• 收藏
• 分享
• 文章举报