Vue+Video.js實(shí)現(xiàn)視頻抽幀并返回抽幀圖片Base64
更新時間:2024年01月19日 09:26:41 作者:白野澤
這篇文章主要為大家詳細(xì)介紹了Vue如何利用Video.js實(shí)現(xiàn)視頻抽幀并返回抽幀圖片Base64,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以了解下
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、預(yù)覽圖的寬高
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,圖片格式默認(rèn)為png,這里修改為jpeg
// console.log(base64URL.split(",")[1]);
return base64URL.split(",")[1];
})
},
//時分秒幀 轉(zhuǎn)為秒
timeToSeconds(time,FPS) {
// 按小時、分鐘、秒進(jìn)行切割
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實(shí)現(xiàn)視頻抽幀并返回抽幀圖片Base64的文章就介紹到這了,更多相關(guān)Vue Video.js視頻抽幀內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
Vue.prototype全局變量的實(shí)現(xiàn)示例
在Vue中可以使用Vue.prototype向Vue的全局作用域添加屬性或方法,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2024-06-06
基于vue的video播放器的實(shí)現(xiàn)示例
這篇文章主要介紹了基于vue的video播放器的實(shí)現(xiàn)示例,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-02-02
Vue-cli創(chuàng)建項目從單頁面到多頁面的方法
本篇文章主要介紹了Vue-cli創(chuàng)建項目從單頁面到多頁面的方法,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2017-09-09
vue-cli創(chuàng)建項目ERROR?in?Conflict:?Multiple?assets?emit?dif
最近vue/cli創(chuàng)建項目后出現(xiàn)了錯誤,下面這篇文章主要給大家介紹了關(guān)于vue-cli創(chuàng)建項目ERROR?in?Conflict:?Multiple?assets?emit?different?content?to?the?same?filename?index.html問題的解決辦法,需要的朋友可以參考下2023-02-02

