js从video中截图并下载_js video截图下载-优快云博客

本文链接：https://blog.youkuaiyun.com/crazy_victor/article/details/84616594

本文介绍了一种使用canvas从video元素中捕获帧并转换为图片的方法，支持多种图片格式，如png、jpg、jpeg、bmp和gif。通过将图片转换为blob数据，创建临时url，利用a标签实现自动下载功能。

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

function savePic(fileName) {
	var fileType = "png";  // 如果文件名中没有带后缀，默认使用png
	switch (fileName) {  // 判断保存的图片格式
		case fileName.indexOf("png") > -1:
			fileType = "png";
			break;
		case fileName.indexOf("jpg") > -1:
			fileType = "jpg";
			break;
	
		case fileName.indexOf("jpeg") > -1:
			fileType = "jpeg";
			break;
		case fileName.indexOf("bmp") > -1:
			fileType = "bmp";
			break;
		case fileName.indexOf("gif") > -1:
			fileType = "gif";
			break;
		default:
			fileType = "png";
			break;
		}
		var video = document.querySelector('#videoElementID');  // 找到需要截图的video标签
		var canvas = window.canvas = document.createElement("canvas");
		canvas.width = video.videoWidth;
		canvas.height = video.videoHeight; 
		canvas.getContext('2d').drawImage(video, 0, 0, canvas.width, canvas.height);  // 图片大小和视频分辨率一致
		var strDataURL = canvas.toDataURL("image/" + fileType);   // canvas中video中取一帧图片并转成dataURL
		var arr = strDataURL.split(','),
			mime = arr[0].match(/:(.*?);/)[1],
			bstr = atob(arr[1]),
			n = bstr.length,
			u8arr = new Uint8Array(n);
		while (n--) {
			u8arr[n] = bstr.charCodeAt(n);
		}
		var blob = new Blob([u8arr], {
			type: mime
		});
		var url = window.URL.createObjectURL(blob);
		var a = document.createElement('a');  
		a.style.display = 'none';
		a.href = url;
		a.download = fileName;
		document.body.appendChild(a);
		a.click();
		setTimeout(function () {
			document.body.removeChild(a);
			window.URL.revokeObjectURL(url);
		}, 1000);
	
	}

调用savePic(文件名)方法，就能自动从video标签中截图并自动下载。
原理就是创建一个canvas，然后从video中取一帧视频绘制到canvas中，再从canvas中把图片转成blob数据后创建url，最后创建一个a标签并自动点击下载，然后销毁a标签。