get两个js小技能——JS截取视频第一帧图片转Base64
背景
由于开发之前做的VisualDrag拖拽模板优化的时候，拖拽进去的图片、视频文件等需要进行截图作为封面，目前采用的截图方法是htme2canvas，使用canvas进行的截图操作，所以就会遇到这样的问题，视频和图片图床简单的使用标签加入canvas画布里面无法正确的截图成功。最后采取的措施就是将图片转为base64画入canvas，将视频截取第一帧图片，然后画进canvas，最后进行截图，最后经过折腾，这个方法好像成功了，写这篇博客进行记录下。
JS截取视频第一帧
截取视频的第一帧作为视频的封面是一个很常见的视频上传的做法。但这种做法一般会在上传进服务器时，在服务器进行截图了，这个操作方法在我之前的博客上有介绍过：https://qkongtao.cn/?p=560#h2-4
但是前端有时候为了避免浪费服务器资源，可以在前端使用js直接进行截图了。
代码如下：
<!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> <imgsrc="https://upyun.qkongtao.cn/kodbox/%E8%A7%86%E9%A2%91/upload.png?_upt=5b974ef11679068799"id="videoImg"></div></div></body><script>function cutImage() {// 获取音频标签let video = document.getElementById('fileVideo')video.currentTime = 2 // 第一帧video.oncanplay = () => {let canvas = document.createElement("canvas");let ctx = canvas.getContext('2d') // 绘制2dcanvas.width = video.clientWidth // 获取视频宽度canvas.height = video.clientHeight // 获取视频高度// 利用canvas对象方法绘图ctx.drawImage(video, 0, 0, video.clientWidth, video.clientHeight)// 转换成base64形式let imgUrl = canvas.toDataURL("image/png");console.log('imgUrl :>> ', imgUrl);document.getElementById("videoImg").src = imgUrl}}
</script></html>
效果如下：
需要注意的地方是视频资源跨域导致画布污染的问题，所以需要在video标签加上 crossorigin=“anonymous” 。
如果需要截图第2帧以上则需要在video.oncanplay()方法中进行截图。
图片转Base64
在开发的很多场景中需要用到base64图片形式进行传输，这种一般会用在缩略图的小文件图片中，提高浏览器的流畅性。
当然在canvas画布中，当进行绘制图片时，最好还是先将图片img标签转换为base64之后进行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>图片转Base64</title>
</head><body><div><button onclick="imgToBase64()">转换成base64形式</button></div><img id="img" src="http://upyun.qkongtao.cn/chevereto/2022/10/28/20210917152407654.jpg" alt="" width="300"><p>转换成base64形式</p><div id="base64" style="word-break: break-all;"></div>
</body><script>function imgToBase64() {var src = document.getElementById("img").srcgetImageUrlBase64(src).then((dataUrl) => {base64Url = dataUrl;console.log('base64Url :>> ', base64Url);document.getElementById("base64").innerHTML = base64Url});}/**@url :图片服务器上的url* @img :图片url对应的图片* */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"); //创建一个canvas元素canvas.width = img.width; //把当前url对应的图片的宽度赋予canvascanvas.height = img.height; //把当前url对应的图片的高度赋予canvasconst ctx = canvas.getContext("2d");ctx.drawImage(img, 0, 0, canvas.width, canvas.height); //在画布上一比一的画出imgconst dataUrl = canvas.toDataURL("image/jpeg"); //调用canvas的toDataURL获取.jpg的base64数据resolve(dataUrl);};});}
</script></html>
效果如下：
