//?獲取視頻基本信息
const?getVideoBasicInfo?=?(videoSrc)?=>?{return?new?Promise((resolve,?reject)?=>?{const?video?=?document.createElement("video");video.src?=?videoSrc;//?視頻一定要添加預加載video.preload?=?"auto";//?視頻一定要同源或者必須允許跨域video.crossOrigin?=?"Anonymous";//?監聽：異常video.addEventListener("error",?(error)?=>?{reject(error);});//?監聽：加載完成基本信息,設置要播放的時常video.addEventListener("loadedmetadata",?()?=>?{const?videoInfo?=?{video,width:?video.videoWidth,height:?video.videoHeight,duration:?video.duration,};resolve(videoInfo);});});
};

//?將獲取到的視頻信息，轉化為圖片地址
const?getVideoPosterInfo?=?(videoInfo)?=>?{return?new?Promise((resolve)?=>?{const?{?video,?width,?height?}?=?videoInfo;video.addEventListener("canplay",?()?=>?{const?canvas?=?document.createElement("canvas");canvas.width?=?width;canvas.height?=?height;const?ctx?=?canvas.getContext("2d");ctx.drawImage(video,?0,?0,?width,?height);const?posterUrl?=?canvas.toDataURL("image/jpg");resolve({?posterUrl?});});});
};

此函數就是最終可以拿到圖片地址的函數了。?

//獲取處理后的圖片地址
const?getImgUrl?=?async?(videoSrc)?=>?{let?videoInfo?=?await?getVideoBasicInfo(videoSrc);let?{posterUrl}?=?await?getVideoPosterInfo(videoInfo);return?posterUrl
};

拓展:

?如果還需要將拿到的圖片進行上傳到遠程服務器的處理 例如阿里云或者OSS服務器中則看下面代碼繼續處理

//base64轉file?文件
const?base64ToFile = (data) =>?{//?將base64?的圖片轉換成file對象上傳?atob將ascii碼解析成binary數據let?binary?=?atob(data.split(",")[1]);let?mime?=?data.split(",")[0].match(/:(.*?);/)[1];let?array?=?[];for?(let?i?=?0;?i?<?binary.length;?i++)?{array.push(binary.charCodeAt(i));}let?fileData?=?new?Blob([new?Uint8Array(array)],?{type:?mime,});let?file?=?new?File([fileData],?`${new?Date().getTime()}.png`,?{type:?mime,});return?file;
}

最終上傳工具就寫完了。? ? ? ?實際調用 只需要傳遞 視頻地址即可。

//獲取OSS地址
const?uploadImgUrl?=?async(videoSrc)=>{let?imgUrl?=?await?getImgUrl(videoSrc)let?fileList=?base64ToFile(imgUrl)var?formData?=?new?FormData()formData.set('filename',?fileList)formData.set('merchantId',?localStorage.getItem('MerchantId'))formData.set('Directory',?'Image')return?new?Promise((resolve,?reject)?=>?{axios.post(`${configs.host.test}/api/FileUpload/Upload`,?formData).then(res?=>?{resolve(res.data);})});
}export?{uploadImgUrl
}