Vue+canvas實現(xiàn)視頻截圖功能

更新時間：2022年07月14日 15:15:37 作者：如夢如戈

這篇文章主要為大家詳細(xì)介紹了Vue+canvas實現(xiàn)視頻截圖功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下

開發(fā)過程中遇到一個實際問題，上傳的視頻需要提供視頻封面（視頻封面必填）。封面可以自己制作并上傳，但是這樣需要脫離網(wǎng)站，用其他方式制作封面，使用體驗并不友好，因此第一個想到的方案是：上傳視頻時，若人員未上傳封面，自動截取視頻第一幀作為封面，但是這樣會出現(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)頁版聊天室功能
這篇文章主要介紹了vue+web端仿微信網(wǎng)頁版聊天室功能，非常不錯，具有一定的參考借鑒價值 ,需要的朋友可以參考下
2019-04-04
VUE使用localstorage和sessionstorage實現(xiàn)登錄示例詳解
這篇文章主要為大家介紹了VUE使用localstorage和sessionstorage實現(xiàn)登錄示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2022-08-08
vue3中$attrs的變化與inheritAttrs的使用詳解
$attrs現(xiàn)在包括class和style屬性。?也就是說在vue3中$listeners不存在了，vue2中$listeners是單獨存在的，在vue3?$attrs包括class和style屬性,?vue2中?$attrs?不包含class和style屬性，這篇文章主要介紹了vue3中$attrs的變化與inheritAttrs的使用?,需要的朋友可以參考下
2022-10-10
在vue中使用防抖和節(jié)流,防止重復(fù)點擊或重復(fù)上拉加載實例
今天小編就為大家分享一篇在vue中使用防抖和節(jié)流,防止重復(fù)點擊或重復(fù)上拉加載實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2019-11-11
elementui中使用el-tabs切換實時更新數(shù)據(jù)
這篇文章主要介紹了elementui中使用el-tabs切換實時更新數(shù)據(jù)，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-08-08
Vue源碼之關(guān)于vm.$delete()/Vue.use()內(nèi)部原理詳解
這篇文章主要介紹了Vue源碼之關(guān)于vm.$delete()/Vue.use()內(nèi)部原理詳解，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2019-05-05
Vue實現(xiàn)圓環(huán)進(jìn)度條的示例
這篇文章主要介紹了Vue實現(xiàn)圓環(huán)進(jìn)度條的示例，幫助大家更好的理解和使用前端框架進(jìn)行開發(fā)，感興趣的朋友可以了解下
2021-02-02
vue中如何下載文件導(dǎo)出保存到本地
這篇文章主要介紹了vue中如何下載文件導(dǎo)出保存到本地，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-08-08
Vue.js設(shè)計與實現(xiàn)分支切換與清除學(xué)習(xí)總結(jié)
這篇文章主要為大家介紹了Vue.js設(shè)計與實現(xiàn)分支切換與清除學(xué)習(xí)總結(jié)，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2023-05-05
vue?+?element-ui?季度選擇器組件?el-quarter-picker示例詳解
本文介紹如何在Vue項目中使用基于Element-UI的季度選擇器組件ElQuarterPicker,通過引用并調(diào)用ElQuarterPicker.vue組件來實現(xiàn)季度選擇功能,感興趣的朋友跟隨小編一起看看吧
2024-09-09