js获取视频的某一帧生成图片

最新推荐文章于 2025-02-27 16:38:24 发布

我有一粒花生米

最新推荐文章于 2025-02-27 16:38:24 发布

阅读量3.7k

点赞数

分类专栏： js获取视频的某一帧生成图片文章标签： js canvas

本文链接：https://blog.csdn.net/weixin_44286765/article/details/114593299

版权

js获取视频的某一帧生成图片专栏收录该内容

1 篇文章

订阅专栏

musicLength = [
	'../music/voide1.mp4',
	'../music/voide2.mp4',
	'../music/voide3.mp4',
	'../music/voide4.mp4',
	'../music/voide5.mp4',
	'../music/voide6.mp4',
	'../music/voide7.mp4',
	'../music/voide8.mp4'
	// './music/music1.mp3',
	// './music/music2.mp3',
	// './music/music3.mp3',
	// './music/music4.mp3',
	// './music/music5.mp3',
	// './music/music6.mp3',
	// './music/music7.mp3',
	// './music/music7.mp3',
]

function getImgBase64(url) {
	return new Promise(function (resolve, reject) {
		let dataURL = '';
		let video = document.createElement("video");
		video.currentTime = 20 //指定帧数
		video.setAttribute('crossOrigin', 'anonymous');//处理跨域	
		video.setAttribute('src', url);
		video.setAttribute('width', 400);
		video.setAttribute('height', 225);
		video.addEventListener('loadeddata', function () {
			let canvas = document.createElement("canvas"),
				width = video.width, //canvas的尺寸和图片一样
				height = video.height;
			canvas.width = width;
			canvas.height = height;
			canvas.getContext("2d").drawImage(video, 0, 0, width, height); //绘制canvas
			dataURL = canvas.toDataURL('image/jpeg'); //转换为base64
			resolve(dataURL);
		});
	})
}

for (let src = 0; src < musicLength.length; src++) {
	getImgBase64(musicLength[src]).then((res) => {
		
		
		console.log(res)
		$('.gallery-card').find('img').eq(src).attr('src', res)

	})
}