本地上传视频获取封面，自动下载成图片（ js 前端）

最新推荐文章于 2024-07-17 15:18:17 发布

h_yelin

最新推荐文章于 2024-07-17 15:18:17 发布

阅读量8.7k

点赞数 3

文章标签： js

本文链接：https://blog.csdn.net/u013960979/article/details/79962051

版权

本方法是通过火狐或chrome浏览器的input上传视频后，获取文件路径，使用video播放视频。

使用h5的canvas画布来绘制封面，生成图片后，通过canvas的toDataURL将图片输出成图片流，然后在执行事件将图片流下载保存到本地。

保存下来的图片相对较大，如果是用于列表，可以通过 https://tinypng.com/进行图片压缩。

具体代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="./jquery-1.10.2.js"></script>
	</head>
	<body>
		<style>
			input {
				margin-bottom: 20px;
				height: 50px;
			}
			#video ,
			video {
				max-width: 100%;
			}
		</style>
		<h1>上传视频等待3秒后自动下载图片，下载完成后可继续上传视频。</h1>
		<p>注1：请使用火狐浏览器进行截图，因为火狐支持canvas的toDataURL方法。</p>
		<p>注2：上传视频格式以普通的mp4格式，不支持ts格式，建议以原转码文件来获取截图</p>
		<p>注3：图片下载后，请通过https://tinypng.com/该压缩图片网站进行压缩，每次可以压缩20张，然后重新下载压缩后的图片来用。</p>
		<p>注4：如果视频一开始是黑屏的，请上传后<strong>立即点击</strong>视频播放，防止所截封面是黑屏。（等待3秒就是用于此处）</p>
		<input id="file" name="file" type="file" value="" placeholder="点击上传" />
		<div id="imgSmallView" style="margin: 10px 0;color: red;font-size: 24px;">响应：<span>请选择视频</span></div>
		<div class="row">
			<div id="video" style="width: 100%;">
				<video src="" controls="controls"></video>
			</div>
		</div>
		<script>
			(function() {
				$('#file').on('change', function() {
					var files = this.files,
						video = $('#video').find('video'),
						videoURL = null,
						windowURL = window.URL || window.webkitURL;;
					if(files && files[0]) {

						videoURL = windowURL.createObjectURL(files[0]);
						$('#imgSmallView span').html('请等待图片下载');
//						$('#video').html('<video src="' + videoURL + '" controls="controls"></video>');
						$('#video video').attr('src', videoURL);
						$('#video video').trigger('click');
						setTimeout(function() {
							createIMG(files[0].name.split('.')[0]+'.png');
						}, 3500);
					}
				}).trigger('change');
				function createIMG(name) {
					var scale = 0.35,
						video = $('#video').find('video')[0],
					 	canvas = document.createElement("canvas");

					 	canvas.width = video.videoWidth * scale;
						canvas.height = video.videoHeight * scale;
						var flag = true;
						for(var flag = true; flag; ) {
							if(canvas.width > 400) {
								canvas.width *= 0.9;
								canvas.height *= 0.9;
							} else {
								flag = false;
							}
						}
						canvas.getContext('2d').drawImage(video, 0, 0, canvas.width, canvas.height);
						saveImage(canvas, name);
				}
				function saveImage(_canvas, _name) {
					var image = _canvas.toDataURL('image/png').replace('image/png', 'image/octet-stream');
					saveFile(image, _name );
				}
				function saveFile(data, _name) {
					var save_link = document.createElementNS('http://www.w3.org/1999/xhtml', 'a');
					save_link.href = data;
					save_link.download = _name;
					var event = document.createEvent('MouseEvents');
					event.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
					save_link.dispatchEvent(event);
					$('#imgSmallView span').html(_name + '图片已下载完成，请继续上传视频等待回应。')
				}
			})();
		</script>
	</body>
</html>

需要注意地方，于代码中已有提示。