場景：業務中上傳視頻之后展示視頻的時候視頻上需要有一張封面圖

標簽vedio中的poster 屬性規定視頻下載時顯示的圖像，或者在用戶點擊播放按鈕前顯示的圖像

目標：

<videocontrols:poster="CoverImg"> <source :src="item.FileUrl" type="video/mp4" />您的瀏覽器不支持 HTML5 video 標簽。 </video>

截取視頻第一幀作為封面圖

// 截取視頻第一幀作為封面圖 然后轉成base64getVideoBase64(url) {return new Promise(function (resolve) {let dataURL = "";const video = document.createElement("video");video.setAttribute("crossOrigin", "anonymous"); // 處理跨域video.setAttribute("src", url);video.setAttribute("preload", "auto");video.addEventListener("loadeddata", function () {const canvas = document.createElement("canvas");console.log("video.clientWidth", video.videoWidth); // 視頻寬console.log("video.clientHeight", video.videoHeight); // 視頻高const width = video.videoWidth || 400; // canvas的尺寸和圖片一樣const height = video.videoHeight || 240; // 設置默認寬高為 400 240canvas.width = width;canvas.height = height;canvas.getContext("2d").drawImage(video, 0, 0, width, height); // 繪制canvasdataURL = canvas.toDataURL("image/jpeg"); // 轉換為base64resolve(dataURL);});});},

base64轉成圖片文件

// base64轉圖片getFileFromBase64(base64URL, filename) {var arr = base64URL.split(","),bstr = atob(arr[1]),n = bstr.length,u8arr = new Uint8Array(n);while (n--) {u8arr[n] = bstr.charCodeAt(n);}return new File([u8arr], filename, { type: "image/png" });},

上傳視頻

<inputtype="file"v-show="inputShow"ref="inputImg"@change="preview($event)"/>

具體過程

preview(event) {var file = event.target.files[0];let ContentType;console.log(file);if (file.type.includes("image")) {ContentType = "image";} else if (file.type.includes("application")) {ContentType = "file";} else if (file.type.includes("video")) {ContentType = "video";} else {ContentType = "file";}const fd = new FormData(); // FormData 對象fd.append("Files", file); // 文件對象//拿到視頻文件請求后端接口uploads(fd).then(async (res) => {if (res.Code == "0") {//如果文件類型是video就進行轉化if (ContentType == "video") {//截取視頻第一幀const vedioUrl = await this.getVideoBase64(res.Urls[0]);// 拿到視頻第一幀的base64圖片轉成圖片文件const imgUrl = await this.getFileFromBase64(vedioUrl, "kefu.jpeg");const fd1 = new FormData();//拿到圖片文件請求后端接口返回鏈接fd1.append("Files", imgUrl);// 封面圖this.CoverImg = await uploads(fd1);console.log("this.CoverImg", this.CoverImg);} }

總結

以上是生活随笔為你收集整理的Vue 截取视频第一帧作为封面图 然后转成base64，base64转成图片的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。