vue 如何獲取視頻第一幀
vue獲取視頻第一幀
findvideocover() { let size = 160 // 獲取video節(jié)點 const video = document.getElementById("videoPlay"); video.width = size video.height = size video.currentTime = 1 // 第一幀 //創(chuàng)建canvas對象 const canvas = document.createElement("canvas") canvas.width = size canvas.height = size this.$nextTick(()=>{ // 利用canvas對象方法繪圖 canvas.getContext("2d").drawImage(video, 0, 0, canvas.width, canvas.height); // 轉(zhuǎn)換成base64形式 const img = canvas.toDataURL("image/jpeg") // 這個就是圖片的base64 this.coverUrl = img }) }
vue視頻截取第一幀圖片-組件
Video to Image
關(guān)于vue下視頻截取第一幀網(wǎng)上方法眾多, 我這邊總結(jié)了一下并且歸納成組件, 希望對為此困擾的你提供一些幫助, 僅需要做一點點的修改頁,本文內(nèi)的代碼可以復(fù)制后直接使用 !
開發(fā)前準備
確定為vue環(huán)境且不是Vue 1;
本組件附帶了轉(zhuǎn)成圖片后的上傳功能, 確定您安裝了axios, 若不需要, 可以返回圖片的file或blob
開始使用
我是把組件代碼存放在@/components/videoToImg 當然您可以自行修改
在需要此功能的使用的vue文件內(nèi)寫入以下
引入
import videotoimg from '@/components/videoToImg'
載入組件
components: { ? ? videotoimg },
使用
<videotoimg :fileObj="fileObj" @uploadSuccess='onSuccess'></videotoimg> // 對應(yīng)數(shù)據(jù) > data: fileObj = { ? ?src: blob:http://192.168.3.15:9528/c1df8e08-039b-4da8-a653-4b93f3747d36, // 選取的視頻文件 ? ?videoW: number, // 視頻寬度 單位為px ? ?videoH: number, // 視頻高度 單位為px }; // 這里是視頻上傳成功后返回給你的參數(shù) > methods: onSuccess: url => { url = { imgUrl: "/upload/image/20201124/1331153160697417728.jpg" }}
組件文件
這里我將文件命名為@/components/videoToImg/index.vue
<template> ? <div ?style="height: 1px; overflow:hidden; opacity: 0"> ? ? <div id="videoArea"></div> ? ? <img :src="imgSrc" /> ? ? <div> ? ? ? <div @click="cutPicture">截圖 {{ videoW }}</div> ? ? </div> ? ? <canvas ? ? ? id="myCanvas" ? ? ? :width="videoW + 'px'" ? ? ? :height="videoH + 'px'" ? ? ></canvas> ? </div> </template> <script> import { getRequestHeader } from "@/utils/auth"; // 這里是獲取我自己的請求頭 可以忽略 或者刪除 import axios from "axios"; export default { ? props: { ? ? fileObj: { ? ? ? type: Object, ? ? ? default: {}, ? ? ? require: true, ? ? }, ? }, ? name: "videotoimg", ? watch: { ? ? fileObj: { ? ? ? handler(newVal, oldVal) { ? ? ? ? console.log(newVal, oldVal); ? ? ? ? this.onClean(); ? ? ? ? this.videoW = newVal.videoW; ? ? ? ? this.videoH = newVal.videoH; ? ? ? ? this.cutPicture(); ? ? ? }, ? ? }, ? }, ? data() { ? ? return { ? ? ? imgSrc: "", ? ? ? videoW: "", ? ? ? videoH: "", ? ? ? headers: getRequestHeader(), ? ? ? uploadUrl: process.env.BASE_API + "v1/general/resource/upload_video", // 截取后上傳的地址 ? ? }; ? }, ? methods: { ? ? onClean() { ? ? ? this.imgSrc = ""; ? ? ? this.videoW = ""; ? ? ? this.videoH = ""; ? ? }, ? ? cutPicture() { ? ? ? let area = document.querySelector("#videoArea"); ? ? ? area.innerHTML = ` ? ? ? ? <video src="${this.fileObj.src}" controls style="width: ${this.videoW}px"></video> ? ? ? `; ? ? ? const that = this; ? ? ? setTimeout(() => { ? ? ? ? var v = document.querySelector("video"); ? ? ? ? let canvas = document.getElementById("myCanvas"); ? ? ? ? var ctx = canvas.getContext("2d"); ? ? ? ? ctx.drawImage(v, 0, 0, this.videoW, this.videoH); ? ? ? ? var oGrayImg = canvas.toDataURL("image/jpeg"); ? ? ? ? that.imgSrc = oGrayImg; ? ? ? ? var arr = oGrayImg.split(","), ? ? ? ? ? mime = arr[0].match(/:(.*?);/)[1], ? ? ? ? ? bstr = atob(arr[1]), ? ? ? ? ? n = bstr.length, ? ? ? ? ? u8arr = new Uint8Array(n); ? ? ? ? while (n--) { ? ? ? ? ? u8arr[n] = bstr.charCodeAt(n); ? ? ? ? } ? ? ? ? var file = new File([u8arr], "videoimg.jpg", { type: mime }); ? ? ? ? console.info(file); // 注意: 如果你不需上傳,這里就可以拿到圖片的ile了 ? ? ? ? that.update(file);? ? ? ? }, 1000); ? ? }, ? ? update(file) { ? ? ? // 上傳照片 ? ? ? // 這里很簡單 就是上傳的邏輯 根據(jù)自己需要進行修改 ? ? ? let self = this; ? ? ? let param = new FormData(); ? ? ? param.append("resourceFile", file);? ? ? ? let config = { ? ? ? ? headers: { "Content-Type": "multipart/form-data", ...self.headers }, ? ? ? }; // 添加請求頭 ? ? ? axios.post(self.uploadUrl, param, config).then((res) => { ? ? ? ? if (res.data.code === 200) { ? ? ? ? ? self.$emit("uploadSuccess", { imgUrl: res.data.data }); // 回傳數(shù)據(jù)! ? ? ? ? } ? ? ? }); ? ? }, ? }, }; </script>
以上為個人經(jīng)驗,希望能給大家一個參考,也希望大家多多支持腳本之家。
相關(guān)文章
vue3中使用ref和emit來減少props的使用示例詳解
現(xiàn)在在開發(fā)vue3項目的過程中,我們開發(fā)小組漸漸的減少props的使用,轉(zhuǎn)而用ref 和 emit 來代替,這篇文章主要介紹了vue3中使用ref和emit來減少props的使用,需要的朋友可以參考下2022-06-06解決nuxt頁面中mounted、created、watch執(zhí)行兩遍的問題
這篇文章主要介紹了解決nuxt頁面中mounted、created、watch執(zhí)行兩遍的問題,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2020-11-11如何用electron把vue項目打包為桌面應(yīng)用exe文件
這篇文章主要介紹了如何用electron把vue項目打包為桌面應(yīng)用exe文件,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2022-05-05