Vue+canvas實(shí)現(xiàn)視頻截圖功能
更新時(shí)間：2022年07月14日 15:15:37 作者：如夢(mèng)如戈
這篇文章主要為大家詳細(xì)介紹了Vue+canvas實(shí)現(xiàn)視頻截圖功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
開發(fā)過(guò)程中遇到一個(gè)實(shí)際問(wèn)題，上傳的視頻需要提供視頻封面（視頻封面必填）。封面可以自己制作并上傳，但是這樣需要脫離網(wǎng)站，用其他方式制作封面，使用體驗(yàn)并不友好，因此第一個(gè)想到的方案是：上傳視頻時(shí)，若人員未上傳封面，自動(dòng)截取視頻第一幀作為封面，但是這樣會(huì)出現(xiàn)一種情況：視頻第一幀是黑色，導(dǎo)致封面為黑色。因此考慮視頻上傳后，在播放中由人員自行截取畫面作為視頻封面。
簡(jiǎn)單效果如圖：
前端代碼如下：
<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請(qǐng)求，將截圖傳給后端API
? ? ? ? this.$axios.post('test/upload', {file: oGrayImg})
? ? ? },
? ? }
? }
</script>以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了Vue路由守衛(wèi)之路由獨(dú)享守衛(wèi)的代碼，非常不錯(cuò)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-09-09
本文主要介紹了Vite3遷移Webpack5的實(shí)現(xiàn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-04-04
這篇文章主要介紹了探秘vue-rx 2.0(推薦)，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-09-09
Vue3結(jié)合TypeScript項(xiàng)目開發(fā)實(shí)踐總結(jié)
本文主要介紹了Vue3結(jié)合TypeScript項(xiàng)目開發(fā)實(shí)踐總結(jié)，文中通過(guò)示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-09-09
基于Vue和Firebase實(shí)現(xiàn)一個(gè)實(shí)時(shí)聊天應(yīng)用
在本文中,我們將學(xué)習(xí)如何使用Vue.js和Firebase來(lái)構(gòu)建一個(gè)實(shí)時(shí)聊天應(yīng)用,Vue.js是一種流行的JavaScript前端框架,而Firebase是Google提供的實(shí)時(shí)數(shù)據(jù)庫(kù)和后端服務(wù),結(jié)合這兩者,我們可以快速搭建一個(gè)功能強(qiáng)大的實(shí)時(shí)聊天應(yīng)用,需要的朋友可以參考下2023-08-08
vue項(xiàng)目使用typescript創(chuàng)建抽象類及其使用方式
這篇文章主要介紹了vue項(xiàng)目使用typescript創(chuàng)建抽象類及其使用方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03
vue+Element實(shí)現(xiàn)搜索關(guān)鍵字高亮功能
這篇文章主要為大家詳細(xì)介紹了vue+Element實(shí)現(xiàn)搜索關(guān)鍵字高亮功能，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-05-05
emits是Vue3新增的選項(xiàng),emits主要作用在子組件中,用于接收在父組件中綁定的方法,這篇文章主要給大家介紹了關(guān)于vue3.x中emits的基本用法,需要的朋友可以參考下2022-07-07
這篇文章主要為大家詳細(xì)介紹了vue輕松實(shí)現(xiàn)水印效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-09-09
vue3 ts組合式API異常onMounted is called when&
這篇文章主要為大家介紹了vue3 ts組合式API異常onMounted is called when there is no active component問(wèn)題解決，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-05-05