Vue+canvas實現視頻截圖功能

3403771864 發布于2022-09-12 18:27 / 958人閱讀

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

　　簡單效果如圖：

　　前端代碼如下：

　　<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: {
　　//截取當前幀的圖片
　　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>

云服務器 GPU云服務器 js視頻截圖功能 html5視頻截圖功能 vue+webrtc實現實時視頻通話,語音通話 html5截圖功能

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/127665.html

一步一步搭建前端監控系統：如何將網頁截圖上報？

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

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

　　在vue項目中canvas實現截圖功能是常用的，下面是具體代碼：　　實現效果：　　在vue項目中做的一個截圖功能（只能夠截取圖片），只用鼠標就可以在畫面中進行框選截取。　　實現：做一個彈窗，打開彈窗的時候傳入要截的圖，接下來在這個窗口里面，點擊截圖按鈕，開始截圖；點擊取消按鈕，取消截圖。　　窗口里面的html主要是三個部分，一個是可截圖區域，一個是截取圖片的回顯，一個是操作按鈕（截圖按鈕和取消...

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

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

freecode 2019-08-22 17:20 評論0 收藏0
學習實踐 - 收藏集 - 掘金

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

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

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

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