缩略图/canvas/Video截图

lx_9119

于 2020-10-23 11:20:10 发布

阅读量333

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/lx_9119/article/details/109239018

本文主要介绍了如何利用HTML5的canvas元素对视频内容进行截图，包括设置canvas尺寸、播放视频、绘制视频帧到canvas以及导出截图图片的详细步骤。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

	1.获取当前video的dom节点
	let Video = document.getElementById('ShowVideo');
	2.创建canvas节点
	let canvas = document.createElement('canvas');
	3.设置canvas为2D并在上边画图片
	element : 需要转换成图片的节点
	x：x轴坐标
	y：y轴坐标
	width：生成图片宽度
	height：生成图片高度
							
	canvas.getContext('2d').drawImage(element, x, y, width, height);
	canvas.getContext('2d').drawImage(Video, 0, 0, 100, 100);

	4.转换canvas为Base64的图片格式
	canvas.toDataURL()

<!DOCTYPE html>
<html>
	<head>
		<meta charset="{CHARSET}">
		<title></title>
	</head>
	<body>
		<img src="day0330/wolkg/images/banner.jpg" id="img" width="100" height="200"/>
		<img id="aa"/>
	</body>
</html>
<script>
	setTimeout(()=>{
		let img = document.getElementById("img")
		let canvas = document.createElement("canvas")
		canvas.getContext('2d').drawImage(img, 0, 0, 100, 100);
		aa.src = canvas.toDataURL()
	},1000)
</script>