js截取视频第一帧作为封面

js截取视频第一帧作为封面,第1张

需求: 上传视频时,有时候需要前端上传封面图,一般是获取视频的第一帧来作为该视频的封面图;
解决方式:

步骤一: 截取视频的第一帧,用 canvas 将图片绘制出来( 默认生成 240*160 的图片 ,图片按自身宽高比缩小,剩余空间填充黑色 ):

let getVideoCover = function(file){
	const imgWidth=240,imgHeight=160;  // 定义生成图片的宽高,其他宽高需求可以自己改
	var fileUrl = URL.createObjectURL(file);
	var videoElement = document.createElement("VIDEO");
    videoElement.src = fileUrl;
    videoElement.addEventListener("loadeddata",()=>{
		let { videoWidth, videoHeight } = videoElement;  // 获取video的宽高
        let x = 0, y = 0, width = 0, height = 0;
        // 计算缩小后图片的宽高以及canvas绘制的位置信息
        if (videoWidth / videoHeight >= 1.5) {
          width = imgWidth ;
          height = videoHeight * (imgWidth / videoWidth);
          x = 0;
          y = (imgHeight- height) / 2;
        } else {
          height = imgHeight;
          width = videoWidth * (imgHeight / videoHeight);
          y = 0;
          x = (imgWidth - width) / 2;
        } 
        var canvas = document.createElement("canvas");
        canvas.width = imgWidth ;
        canvas.height = imgHeight;
        let ctx = canvas.getContext("2d");
        ctx.fillStyle = "#000";
        ctx.fillRect(0, 0, imgWidth , imgHeight);
        ctx.drawImage(videoElement, x, y, width, height);
        let src = canvas.toDataURL("image/png"); // 完成base64图片的创建
	})
}

这个函数接收一个参数,为file,即需要上传的视频文件,最后的 src 就是图片的base64 ,可以直接放在 img 标签的 src 上面使用,如果后端可以上传base64的话,那么就可以直接上传这个src了,如果后端需要你将这个图片转成文件上传,那么就还需要下一步。

步骤二: 将 base64 图片转换成 file 对象:

dataURLtoFile(dataurl, filename) {
	var arr = dataurl.split(","),
		mime = arr[0].match(/:(.*?);/)[1],
		bstr = atob(arr[1]),
		n = bstr.length,
		u8arr = new Uint8Array(n);
	while (n--) {
		u8arr[n] = bstr.charCodeAt(n);
	}
	return new File([u8arr], filename, { type: mime });
},

该函数需要两个参数,第一个参数就是图片的 base64 数据,第二个就是文件的名字,会返回一个 File 对象,将这个file对象发送给后端就可以了。

欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/web/1321337.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2022-06-12
下一篇 2022-06-12

发表评论

登录后才能评论

评论列表(0条)

保存