背景
由于開發(fā)之前做的VisualDrag拖拽模板優(yōu)化的時候，拖拽進(jìn)去的圖片、視頻文件等需要進(jìn)行截圖作為封面，目前采用的截圖方法是htme2canvas，使用canvas進(jìn)行的截圖操作，所以就會遇到這樣的問題，視頻和圖片圖床簡單的使用標(biāo)簽加入canvas畫布里面無法正確的截圖成功。最后采取的措施就是將圖片轉(zhuǎn)為base64畫入canvas，將視頻截取第一幀圖片，然后畫進(jìn)canvas，最后進(jìn)行截圖，最后經(jīng)過折騰，這個方法好像成功了，寫這篇博客進(jìn)行記錄下。
JS截取視頻第一幀
截取視頻的第一幀作為視頻的封面是一個很常見的視頻上傳的做法。但這種做法一般會在上傳進(jìn)服務(wù)器時，在服務(wù)器進(jìn)行截圖了，這個操作方法在我之前的博客上有介紹過：https://qkongtao.cn/?p=560#h2-4
但是前端有時候為了避免浪費(fèi)服務(wù)器資源，可以在前端使用js直接進(jìn)行截圖了。
代碼如下：文章來源：http://www.zghlxwxcb.cn/news/detail-526770.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>js截取視頻第一幀</title>
</head>
<body>
<div>
<button onclick="cutImage()">截取視頻第一幀</button>
</div>
<div>
<!-- 注意跨域畫布污染 -->
<video width="640" height="480" src="https://upyun.qkongtao.cn/kodbox/%E8%A7%86%E9%A2%91/20221016134256839.mp4"
controls="controls" id="fileVideo" crossorigin="anonymous">您的瀏覽器不支持視頻播放</video>
<div>
<p>視頻第一幀：</p> <img
src="https://upyun.qkongtao.cn/kodbox/%E8%A7%86%E9%A2%91/upload.png?_upt=5b974ef11679068799"
id="videoImg">
</div>
</div>
</body>
<script>
function cutImage() {
// 獲取音頻標(biāo)簽
let video = document.getElementById('fileVideo')
video.currentTime = 2 // 第一幀
video.oncanplay = () => {
let canvas = document.createElement("canvas");
let ctx = canvas.getContext('2d') // 繪制2d
canvas.width = video.clientWidth // 獲取視頻寬度
canvas.height = video.clientHeight // 獲取視頻高度
// 利用canvas對象方法繪圖
ctx.drawImage(video, 0, 0, video.clientWidth, video.clientHeight)
// 轉(zhuǎn)換成base64形式
let imgUrl = canvas.toDataURL("image/png");
console.log('imgUrl :>> ', imgUrl);
document.getElementById("videoImg").src = imgUrl
}
}
</script>
</html>
效果如下：
需要注意的地方是視頻資源跨域?qū)е庐嫴嘉廴镜膯栴}，所以需要在video標(biāo)簽加上 crossorigin=“anonymous” 。
如果需要截圖第2幀以上則需要在video.oncanplay()方法中進(jìn)行截圖。
圖片轉(zhuǎn)Base64
在開發(fā)的很多場景中需要用到base64圖片形式進(jìn)行傳輸，這種一般會用在縮略圖的小文件圖片中，提高瀏覽器的流暢性。
當(dāng)然在canvas畫布中，當(dāng)進(jìn)行繪制圖片時，最好還是先將圖片img標(biāo)簽轉(zhuǎn)換為base64之后進(jìn)行drawImage()，避免畫布被污染和跨域等問題。
代碼如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>圖片轉(zhuǎn)Base64</title>
</head>
<body>
<div>
<button onclick="imgToBase64()">轉(zhuǎn)換成base64形式</button>
</div>
<img id="img" src="http://upyun.qkongtao.cn/chevereto/2022/10/28/20210917152407654.jpg" alt="" width="300">
<p>轉(zhuǎn)換成base64形式</p>
<div id="base64" style="word-break: break-all;"></div>
</body>
<script>
function imgToBase64() {
var src = document.getElementById("img").src
getImageUrlBase64(src).then(
(dataUrl) => {
base64Url = dataUrl;
console.log('base64Url :>> ', base64Url);
document.getElementById("base64").innerHTML = base64Url
}
);
}
/**@url :圖片服務(wù)器上的url
* @img :圖片url對應(yīng)的圖片
* */
function getImageUrlBase64(url) {
return new Promise((resolve, reject) => {
const img = new Image();
img.crossOrigin = "anonymous"; //處理跨域
img.src = url;
img.onload = function () {
const canvas = document.createElement("canvas"); //創(chuàng)建一個canvas元素
canvas.width = img.width; //把當(dāng)前url對應(yīng)的圖片的寬度賦予canvas
canvas.height = img.height; //把當(dāng)前url對應(yīng)的圖片的高度賦予canvas
const ctx = canvas.getContext("2d");
ctx.drawImage(img, 0, 0, canvas.width, canvas.height); //在畫布上一比一的畫出img
const dataUrl = canvas.toDataURL("image/jpeg"); //調(diào)用canvas的toDataURL獲取.jpg的base64數(shù)據(jù)
resolve(dataUrl);
};
});
}
</script>
</html>
效果如下：
文章來源地址http://www.zghlxwxcb.cn/news/detail-526770.html
到了這里，關(guān)于get兩個js小技能——JS截取視頻第一幀&圖片轉(zhuǎn)Base64的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
