截取視頻的某一時間的圖像並保存
利用canvas的繪畫能力畫出視頻某一幀的視頻畫面, 獲得到圖像之后轉換成base64圖像, 再利用a標簽的實現自動保存到本地
- html代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>視頻截圖保存到本地</title>
</head>
<body>
<div><button id="btn">開始截圖</button></div>
<img id="img">
<a id="a" download="" style="display: none;">去下載</a>
</body>
</html>
- js代碼
// 綁定下載
document.getElementById("btn").onclick = function() {
videoCover("視頻地址", null, 400)
}
/**
* @param {String} src 視頻鏈接
* @param {Number} width 視頻容器播放的寬
* @param {Number} height 視頻容器播放的高
* @param {Number} second 需要截圖視頻的幀數, 單位秒
* @param {Number} bufftime 視頻加載緩沖的時長, 單位秒
*/
function videoCover(src, width, height, second, bufftime) {
const canvas = document.createElement('canvas'); // 創建canvas 用來截圖
const video = document.createElement('video'); // 創建video 用來存放被截圖的視頻
const img = document.getElementById('img') // 用來顯示截圖的圖片效果
const a = document.getElementById('a') // 用來自動下載圖片保存到本地
video.setAttribute('crossOrigin', 'anonymous'); // 支持跨域
document.body.appendChild(video); // 把視頻插入頁面里
video.setAttribute('src', src); // 設置video路徑
video.style.visibility = "hidden" // 視頻不顯示
// 監聽視頻播放
video.onplay = function() {
// 暫停
video.pause()
// 指定播放時間 1代表視頻的第一秒幀 可以浮點數
video.currentTime = second || 1
// 設置視頻容器的寬高播放 如果設置一項會自動按照比例生成 這里是高固定,寬自動
video.height = height || video.clientHeight;
// 設置canvas的截圖大小,如果沒給定寬高值會取視頻容器的寬高
canvas.width = width || video.clientWidth;
canvas.height = height || video.height;
/*
使用定時器為了視頻跳轉到某一幀的時候視頻進行緩沖,等視頻加載完成之后進行截圖
如果截圖是黑屏說明視頻未加載完成就開始截屏了
*/
setTimeout(() => {
// 使用canvas進行繪畫 視頻畫面
canvas.getContext('2d').drawImage(video, 0, 0, canvas.width, canvas.height);
// 獲取到base64圖片 png格式
const IMG_TYPE = "png"
const b64 = canvas.toDataURL('image/' + IMG_TYPE);
// 展示到頁面上給img的src賦值
document.getElementById('img').setAttribute('src', b64);
// 設置下載圖片地址
document.getElementById('a').setAttribute('href', b64);
// 設置下載圖片的名稱
const filename = "測試圖" + "." + IMG_TYPE
document.getElementById('a').setAttribute('download', filename);
// 模擬點擊自動下載圖片
document.getElementById('a').click()
// 移除視頻容器
document.body.removeChild(video);
}, bufftime * 1000 || 3000);
}
// 當視頻准備就緒的時候
video.onloadeddata = () => {
// 播放它
video.play()
}
}
以上代碼就完成了單個的視頻截圖了.
- 如何實現多個視頻批量截圖視頻呢?
使用for循環遍歷 調用 videoCover 函數, videoCover 需要重寫一下.
先規定需要遍歷視頻截圖的內容
[
{
"src":"*******.video", // 視頻下載地址
"currentTime":5, //需要截取的視頻幀數,第幾秒
"filename":"測試1", // 需要下載到本地的文件名
"filetype":"png" // 下載的圖片類型
},
{
"src":"*******.video", // 視頻下載地址
"currentTime":5, //需要截取的視頻幀數,第幾秒
"filename":"測試1", // 需要下載到本地的文件名
"filetype":"png" // 下載的圖片類型
}
]
- 重寫
videoCover函數
使用
promise,async,await遍歷循環截圖下載圖片
/**
* @param {Object} obj 視頻內容對象
* @param {Number} width 視頻容器播放的寬
* @param {Number} height 視頻容器播放的高
* @param {Number} bufftime 視頻加載緩沖的時長, 單位秒
*/
function videoCover(obj, width, height, bufftime) {
return new Promise((resolve, reject) => {
const canvas = document.createElement('canvas'); // 創建canvas 用來截圖
const video = document.createElement('video'); // 創建video 用來存放被截圖的視頻
const img = document.getElementById('img') // 用來顯示截圖的圖片效果
const a = document.getElementById('a') // 用來自動下載圖片保存到本地
video.setAttribute('crossOrigin', 'anonymous'); // 支持跨域
document.body.appendChild(video); // 把視頻插入頁面里
video.setAttribute('src', obj.src); // 設置video路徑
video.style.visibility = "hidden" // 視頻不顯示
// 監聽視頻播放
video.onplay = function () {
// 暫停
video.pause()
// 指定播放時間 1代表視頻的第一秒幀 可以浮點數
video.currentTime = obj.currentTime || 1
// 設置視頻容器的寬高播放 如果設置一項會自動按照比例生成 這里是高固定,寬自動
video.height = height || video.clientHeight;
// 設置canvas的截圖大小,如果沒給定寬高值會取視頻容器的寬高
canvas.width = width || video.clientWidth;
canvas.height = height || video.height;
/*
使用定時器為了視頻跳轉到某一幀的時候視頻進行緩沖,等視頻加載完成之后進行截圖
如果截圖是黑屏說明視頻未加載完成就開始截屏了
*/
setTimeout(() => {
// 使用canvas進行繪畫 視頻畫面
canvas.getContext('2d').drawImage(video, 0, 0, canvas.width, canvas.height);
// 獲取到base64圖片 png格式
const b64 = canvas.toDataURL('image/' + obj.filetype);
// 移除視頻容器
document.body.removeChild(video);
resolve(b64)
}, bufftime * 1000 || 3000);
}
// 當視頻准備就緒的時候
video.onloadeddata = () => {
// 播放它
video.play()
}
})
}
- 在寫個循環遍歷
videoCover函數
async function start() {
const DATA = [{
"src": "http:/****.mp4", // 視頻下載地址
"currentTime": 5, //需要截取的視頻幀數,第幾秒
"filename": "測試1", // 需要下載到本地的文件名
"filetype": "png" // 下載的圖片類型
},
{
"src": "http:/****.mp4", // 視頻下載地址
"currentTime": 2, //需要截取的視頻幀數,第幾秒
"filename": "測試2", // 需要下載到本地的文件名
"filetype": "png" // 下載的圖片類型
}]
const img = document.getElementById('img') // 用來顯示截圖的圖片效果
const a = document.getElementById('a') // 用來自動下載圖片保存到本地
for (let index = 0; index < DATA.length; index++) {
const element = DATA[index];
console.log("開始截圖視頻:" + element.src);
const b64 = await videoCover(element, null, 400, 3)
// 展示到頁面上給img的src賦值
img.setAttribute('src', b64);
// 設置下載圖片地址
a.setAttribute('href', b64);
// 設置下載圖片的名稱
const filename = element.filename + "." + element.filetype
a.setAttribute('download', filename);
// 模擬點擊自動下載圖片
a.click()
console.log("截圖保存到本地成功:命名<" + filename + ">");
}
console.log("所有視頻截圖下載本地完成!");
}
// 綁定下載
document.getElementById("btn").onclick = function () {
start()
}
然后點擊按鈕去截圖,就可以開始批量截圖視頻保存到本地了.
