video使用canvas截图黑屏

最新推荐文章于 2024-09-11 17:25:08 发布

撒波罗

最新推荐文章于 2024-09-11 17:25:08 发布

阅读量3.1k

点赞数

文章标签： js canvas html5

本文链接：https://blog.csdn.net/weixin_43090627/article/details/107531524

版权

截图黑屏问题

使用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);