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

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)

	})
}

你可能感兴趣的:(js获取视频的某一帧,生成图片,js,canvas)