Vue+canvas實(shí)現(xiàn)視頻截圖功能
更新時(shí)間：2022年07月14日 15:15:37 作者：如夢如戈
這篇文章主要為大家詳細(xì)介紹了Vue+canvas實(shí)現(xiàn)視頻截圖功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
開發(fā)過程中遇到一個(gè)實(shí)際問題，上傳的視頻需要提供視頻封面（視頻封面必填）。封面可以自己制作并上傳，但是這樣需要脫離網(wǎng)站，用其他方式制作封面，使用體驗(yàn)并不友好，因此第一個(gè)想到的方案是：上傳視頻時(shí)，若人員未上傳封面，自動截取視頻第一幀作為封面，但是這樣會出現(xiàn)一種情況：視頻第一幀是黑色，導(dǎo)致封面為黑色。因此考慮視頻上傳后，在播放中由人員自行截取畫面作為視頻封面。
簡單效果如圖：
前端代碼如下：
<template>
? <div>
? ? <video src="https://{{視頻地址}}.mp4"
? ? ? ? ? ?crossOrigin="Anonymous" controls style="width:300px;"></video>
? ? <img :src="imgSrc">
? ? <div>
? ? ? <el-button @click="cutPicture">
? ? ? ? 截圖
? ? ? </el-button>
? ? </div>
? ? <canvas id="myCanvas" width="343" height="200"></canvas>
? </div>
</template>
<script>
? export default {
? ? name: 'video',
? ? data () {
? ? ? return {
? ? ? ? imgSrc: '',
? ? ? ? videoData:{},
? ? ? }
? ? },
? ? methods: {
? ? ? //截取當(dāng)前幀的圖片
? ? ? cutPicture () {
? ? ? ? let self = this
? ? ? ? var v = document.querySelector('video')
? ? ? ? let canvas = document.getElementById('myCanvas')
? ? ? ? // canvas.setAttribute("crossOrigin",'Anonymous')
? ? ? ? var ctx = canvas.getContext('2d')
? ? ? ? ctx.drawImage(v, 0, 0, 343, 200)
? ? ? ? var oGrayImg = canvas.toDataURL('image/jpeg')
? ? ? ? // this.imgSrc = oGrayImg
? ? ? ? // axios請求，將截圖傳給后端API
? ? ? ? this.$axios.post('test/upload', {file: oGrayImg})
? ? ? },
? ? }
? }
</script>以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了vue+web端仿微信網(wǎng)頁版聊天室功能，非常不錯(cuò)，具有一定的參考借鑒價(jià)值 ,需要的朋友可以參考下2019-04-04
VUE使用localstorage和sessionstorage實(shí)現(xiàn)登錄示例詳解
這篇文章主要為大家介紹了VUE使用localstorage和sessionstorage實(shí)現(xiàn)登錄示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-08-08
vue3中$attrs的變化與inheritAttrs的使用詳解
$attrs現(xiàn)在包括class和style屬性。?也就是說在vue3中$listeners不存在了，vue2中$listeners是單獨(dú)存在的，在vue3?$attrs包括class和style屬性,?vue2中?$attrs?不包含class和style屬性，這篇文章主要介紹了vue3中$attrs的變化與inheritAttrs的使用?,需要的朋友可以參考下2022-10-10
在vue中使用防抖和節(jié)流,防止重復(fù)點(diǎn)擊或重復(fù)上拉加載實(shí)例
今天小編就為大家分享一篇在vue中使用防抖和節(jié)流,防止重復(fù)點(diǎn)擊或重復(fù)上拉加載實(shí)例，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-11-11
elementui中使用el-tabs切換實(shí)時(shí)更新數(shù)據(jù)
這篇文章主要介紹了elementui中使用el-tabs切換實(shí)時(shí)更新數(shù)據(jù)，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-08-08
Vue源碼之關(guān)于vm.$delete()/Vue.use()內(nèi)部原理詳解
這篇文章主要介紹了Vue源碼之關(guān)于vm.$delete()/Vue.use()內(nèi)部原理詳解，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2019-05-05
Vue實(shí)現(xiàn)圓環(huán)進(jìn)度條的示例
這篇文章主要介紹了Vue實(shí)現(xiàn)圓環(huán)進(jìn)度條的示例，幫助大家更好的理解和使用前端框架進(jìn)行開發(fā)，感興趣的朋友可以了解下2021-02-02
這篇文章主要介紹了vue中如何下載文件導(dǎo)出保存到本地，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-08-08
Vue.js設(shè)計(jì)與實(shí)現(xiàn)分支切換與清除學(xué)習(xí)總結(jié)
這篇文章主要為大家介紹了Vue.js設(shè)計(jì)與實(shí)現(xiàn)分支切換與清除學(xué)習(xí)總結(jié)，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-05-05
vue?+?element-ui?季度選擇器組件?el-quarter-picker示例詳解
本文介紹如何在Vue項(xiàng)目中使用基于Element-UI的季度選擇器組件ElQuarterPicker,通過引用并調(diào)用ElQuarterPicker.vue組件來實(shí)現(xiàn)季度選擇功能,感興趣的朋友跟隨小編一起看看吧2024-09-09