<ul id="2g24k"></ul>

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

3403771864 發(fā)布于2022-09-12 18:27 / 985人閱讀

　　上傳視頻要提供視頻封面（視頻封面必填），這是在開發(fā)中實際問題。封面可以用戶自己制作并上傳，但這樣脫離網(wǎng)站，體驗不好，常見的處理方案就是用戶未選擇或上傳封面時，自動截取視頻第一幀作為封面，但這樣并不友好。因此考慮視頻上傳后，在播放中由人員自行截取畫面作為視頻封面。

　　簡單效果如圖：

　　前端代碼如下：

　　<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>

云服務(wù)器 GPU云服務(wù)器 js視頻截圖功能 html5視頻截圖功能 vue+webrtc實現(xiàn)實時視頻通話,語音通話 html5截圖功能

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/127665.html

相關(guān)文章

一步一步搭建前端監(jiān)控系統(tǒng)：如何將網(wǎng)頁截圖上報？

摘要：目前已經(jīng)在運行的線上前端監(jiān)控系統(tǒng)代碼和講解都放在這篇文章里監(jiān)控系統(tǒng)介紹及代碼用戶對前端程序員來說，就是一個黑匣子。摘要：通過錄屏或者截圖，快速復(fù)現(xiàn)BUG場景。作者：一步一個腳印一個坑原文：搭建前端監(jiān)控系統(tǒng)（備選）Js截圖上報篇 Fundebug經(jīng)授權(quán)轉(zhuǎn)載，版權(quán)歸原作者所有。 PS：本文關(guān)于Fundebug錄屏功能的內(nèi)容有些不準(zhǔn)確的地方，比如錄屏并非通過截圖實現(xiàn)的，錄屏插件...

Martin91 2019-08-26 10:21 評論0 收藏0
vue項目中canvas實現(xiàn)截圖功能

　　在vue項目中canvas實現(xiàn)截圖功能是常用的，下面是具體代碼：　　實現(xiàn)效果：　　在vue項目中做的一個截圖功能（只能夠截取圖片），只用鼠標(biāo)就可以在畫面中進(jìn)行框選截取?！　崿F(xiàn)：做一個彈窗，打開彈窗的時候傳入要截的圖，接下來在這個窗口里面，點擊截圖按鈕，開始截圖；點擊取消按鈕，取消截圖?！　〈翱诶锩娴膆tml主要是三個部分，一個是可截圖區(qū)域，一個是截取圖片的回顯，一個是操作按鈕（截圖按鈕和取消...

3403771864 2022-09-12 18:47 評論0 收藏0
實現(xiàn)Google帶截圖功能的web反饋插件

摘要：谷歌是通過來實現(xiàn)這個組件的，比較復(fù)雜谷歌的工具加載文件和截圖文件有興趣的同學(xué)可以看一下。高亮區(qū)域核心部分截圖搞定了，接下來就是高亮區(qū)域了。幾乎所有的APP應(yīng)用包括Web應(yīng)用都需要一個意見反饋，這樣才能了解用戶對產(chǎn)品的意見和建議，以便于不斷提升完善自己的產(chǎn)品。目前的反饋組件一般有兩種，一種是打開一個反饋頁面填寫表單，另一種則是通過彈窗來完成，相比較而言第二種更加方便，而且更加容易組件化...

freecode 2019-08-22 17:20 評論0 收藏0
學(xué)習(xí)實踐 - 收藏集 - 掘金

摘要：官網(wǎng)地址聊天機(jī)器人插件開發(fā)實例教程一創(chuàng)建插件在系統(tǒng)技巧使你的更加專業(yè)前端掘金一個幫你提升技巧的收藏集。我會簡單基于的簡潔視頻播放器組件前端掘金使用和實現(xiàn)購物車場景前端掘金本文是上篇文章的序章，一直想有機(jī)會再次實踐下。 2道面試題：輸入URL按回車&HTTP2 - 掘金通過幾輪面試，我發(fā)現(xiàn)真正那種問答的技術(shù)面，寫一堆項目真不如去刷技術(shù)文章作用大，因此刷了一段時間的博客和掘金，整理下曾經(jīng)被...

mikyou 2019-08-29 12:50 評論0 收藏0
記一次“失利后”經(jīng)過半年準(zhǔn)備通過阿里社招的經(jīng)歷與感悟

摘要：寫在最前本次分享一下在作者上一次失利即拿到畢業(yè)證第二天突然收到阿里社招面試通知失敗之后，通過分析自己的定位與實際情況，做出的未來一到兩年的規(guī)劃。在博客有一定曝光度的積累中，陸續(xù)收到了一些面試邀請，基本上是阿里的但是我知道我菜。。寫在最前本次分享一下在作者上一次失利即拿到畢業(yè)證第二天突然收到阿里社招面試通知失敗之后，通過分析自己的定位與實際情況，做出的未來一到兩年的規(guī)劃。以及本次社招...

malakashi 2019-08-26 11:36 評論0 收藏0