基于canvas的Node.js视频抽帧存图服务

前端代码:

if(this.getFileType(file.type) == "video"){
	let windowURL = window.URL || window.webkitURL;
	let videoURL = windowURL.createObjectURL(file);
	let player = document.createElement("video");
	player.src = videoURL;
	player.autoplay = "autoplay";
	let canvas = document.createElement("canvas");
	canvas.width = 700;
	canvas.height = 400;
	player.addEventListener('play', () => {
		canvas.getContext('2d').drawImage(player, 0, 0, 700, 400);
		player.pause();
		setTimeout(()=>{
			let formData = new FormData();
			formData.append("base64Data", canvas.toDataURL('image/png'));
			formData.append("timestamp", new Date().getTime());
			formData.append("site_code", sessionStorage.getItem("siteCode"));
			formData.append("sobey_token", sessionStorage.getItem("sobeyToken"));
			ApiFileTGetCoverUrl(formData).then((res) => {
				if(res.code == 200){
					this.$message.success("获取视频封面图片成功");
					this.uploadForm.file_cover_url = res.data.file_cover_url;
					this.uploadForm.file_cover_path = res.data.file_cover_path;
				}else{
					Promise.reject("获取视频封面图片过程中服务器发生错误,可能原因为未配置存储");
				}
			});
		},100);
	}, false);
}

后端代码:

router.post('/getCoverUrl', async (ctx, next) => {
	try{
		let result = await checkLoginState.check(ctx);
		if(result.status){
			// 获取存储地址
			let { base64Data,timestamp,site_code,sobey_token } = ctx.request.fields;
			let res = await axios.get();
			let rootDir = res.data.nas[0].path.replace("\\\\static.com\\hivedata", "\\mnt").replace(/\\/g, "/");
			let dateObject = new Date();
			let year = dateObject.getFullYear();
			let month = dateObject.getMonth()+1;
			let date = dateObject.getDate();
			let filename = 'image_' + timestamp + '.' + 'png';
			base64Data = base64Data.replace(/^data:image\/\w+;base64,/, "");
			let pictureBuff = Buffer.from(base64Data, 'base64');
			//将图片数据写入文件
			fs.writeFile(`${uploadPath}/${filename}`, pictureBuff, (err) => {
				if (err) {
					console.log("视频封面保存失败");
				}else{
					// 移动文件
					mkdirsSync(`${rootDir}/AiToolsCover`);
					mkdirsSync(`${rootDir}/AiToolsCover/${year}`);
					mkdirsSync(`${rootDir}/AiToolsCover/${year}/${month}`);
					mkdirsSync(`${rootDir}/AiToolsCover/${year}/${month}/${date}`);
					let readStream = fs.createReadStream(`${uploadPath}/${filename}`);
					let writeStream = fs.createWriteStream(`${rootDir}AiToolsCover/${year}/${month}/${date}/${filename}`);
					readStream.pipe(writeStream);
					readStream.on('end', () => {
						fs.unlinkSync(`${uploadPath}/${filename}`);
					});
					console.log(`文件移动: ${uploadPath}/${filename} -> ${rootDir}AiToolsCover/${year}/${month}/${date}/${filename}`);
				}
			});
			let returnCoverURL = `${rootDir}AiToolsCover/${year}/${month}/${date}/${'image_' + timestamp + '.' + 'png'}`;
			ctx.body = {
				code: 200,
				message: "获取视频封面地址成功",
				data: {
					file_cover_path: returnCoverURL.replace(/\//g, "\\").replace("\\mnt", "\\\\static.com\\hivedata"),
					file_cover_url: `http://10.20.56.42:9001${returnCoverURL.replace("/mnt", "")}`,
				}
			}
		}else{
			util.res(ctx, 1002, result.data);
		}
	}catch(err){
		console.log(err);
		ctx.body = {
			code: 8888,
			message: err,
			data: null,
		};
	}
});

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值