video使用canvas截图黑屏

截图黑屏问题使用canvas对video进行截图出现黑屏，主要原因是 drawImage的第一个参数需要是 HTMLImageELement，或者是HTMLVideoElement。而我们通过id获取到的元素是包了一层div，需要获取它的子节点var videoTag = document.getElementById('my-video');var canvas = document.getEl

撒波罗

3483人浏览 · 2020-07-23 10:52:35

撒波罗 · 2020-07-23 10:52:35 发布

截图黑屏问题

使用canvas对video进行截图出现黑屏，主要原因是 drawImage的第一个参数需要是 HTMLImageELement，或者是HTMLVideoElement。而我们通过id获取到的元素是包了一层div，需要获取它的子节点

var videoTag = document.getElementById('my-video');
var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');

// 这一句是重要代码，就是获取videoElement
var videoElment = videoTag.children[0];

console.log(videoTag,videoElment )
context.drawImage(videoElment, 0, 0, 640, 264);