Vue+Video.js實現(xiàn)視頻抽幀并返回抽幀圖片Base64
更新時間:2024年01月19日 09:26:41 作者:白野澤
這篇文章主要為大家詳細介紹了Vue如何利用Video.js實現(xiàn)視頻抽幀并返回抽幀圖片Base64,文中的示例代碼講解詳細,感興趣的小伙伴可以了解下
1.vue
// 抽幀 (url視頻地址 time00:00:00:00時分秒幀 FPS視頻幀率) 返回抽幀圖片Base64 getImgBase64(url,time,FPS) { var base64URL = '' let video = document.createElement('video') video.setAttribute('crossOrigin', 'anonymous') //處理跨域 video.setAttribute('src', url) video.currentTime = this.timeToSeconds(time,FPS); video.addEventListener('loadeddata', function() { let canvas = document.createElement('canvas') //使用視頻的寬高作為canvas、預覽圖的寬高 let width = video.videoWidth let height = video.videoHeight canvas.width = width canvas.height = height canvas.getContext('2d').drawImage(video, 0, 0, width, height) //繪制canvas base64URL = canvas.toDataURL('image/jpeg') //轉(zhuǎn)換為base64,圖片格式默認為png,這里修改為jpeg // console.log(base64URL.split(",")[1]); return base64URL.split(",")[1]; }) }, //時分秒幀 轉(zhuǎn)為秒 timeToSeconds(time,FPS) { // 按小時、分鐘、秒進行切割 const [hours, minutes, seconds,frame] = time.split(':'); // 計算總共的秒數(shù) var second = parseInt(hours) * 3600 + parseInt(minutes) * 60 + parseInt(seconds)+ (1/FPS) * parseInt(frame); //若秒數(shù)為0 防止黑幀 賦值0.1 if(second == 0){ second = 0.1; } return second; },
2.Java接口測試生成文件
/** * 抽幀 * @param jsonObject * @return */ @PostMapping("/getFetchFrame") public AjaxResult getFetchFrame(@RequestBody JSONObject jsonObject) { String imgStr = jsonObject.getString("imgStr"); OutputStream out = null; BASE64Decoder decoder = new BASE64Decoder(); try { byte[] b = decoder.decodeBuffer(imgStr); //文件存儲位置 String uploadUrl = "C:\\Users\\cdv\\Desktop"; File testFile = new File(uploadUrl); if (!testFile.exists()) { testFile.mkdirs(); } String fileName = "frame" + System.currentTimeMillis() + ".jpg"; String imgFilePath = uploadUrl + "/" + fileName; out = new FileOutputStream(imgFilePath); out.write(b); out.flush(); return AjaxResult.success(); } catch (Exception e) { logger.error("抽幀失?。?error : " + e.getMessage()); return AjaxResult.error("抽幀失敗"); } finally { try { if (out != null) { out.close(); } } catch (Exception e2) { logger.error("關(guān)閉輸出流失??! error : " + e2.getMessage()); return AjaxResult.error("關(guān)閉輸出流失敗"); } } }
到此這篇關(guān)于Vue+Video.js實現(xiàn)視頻抽幀并返回抽幀圖片Base64的文章就介紹到這了,更多相關(guān)Vue Video.js視頻抽幀內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
關(guān)于vue項目vue-cli-service啟動報錯失敗問題的解決方法
前端拉取代碼后,想要運行代碼的時候可以能遇到啟動報錯的問題,這里我們只針對于vue-cli-service報錯項來說,文中通過圖文結(jié)合的方式給大家介紹的非常詳細,具有一定的參考價值,需要的朋友可以參考下2024-08-08vue中使用gantt-elastic實現(xiàn)可拖拽甘特圖的示例代碼
這篇文章主要介紹了vue中使用gantt-elastic實現(xiàn)可拖拽甘特圖,本文給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2022-07-07