背景

由于开发之前做的VisualDrag拖拽模板优化的时候，拖拽进去的图片、视频文件等需要进行截图作为封面，目前采用的截图方法是htme2canvas，使用canvas进行的截图操作，所以就会遇到这样的问题，视频和图片图床简单的使用标签加入canvas画布里面无法正确的截图成功。最后采取的措施就是将图片转为base64画入canvas，将视频截取第一帧图片，然后画进canvas，最后进行截图，最后经过折腾，这个方法好像成功了，写这篇博客进行记录下。

JS截取视频第一帧

截取视频的第一帧作为视频的封面是一个很常见的视频上传的做法。但这种做法一般会在上传进服务器时，在服务器进行截图了，这个操作方法在我之前的博客上有介绍过：https://qkongtao.cn/?p=560#h2-4

但是前端有时候为了避免浪费服务器资源，可以在前端使用js直接进行截图了。

代码如下：


js截取视频第一帧
视频第一帧：

效果如下：
在这里插入图片描述

需要注意的地方是视频资源跨域导致画布污染的问题，所以需要在video标签加上 crossorigin=“anonymous” 。
如果需要截图第2帧以上则需要在video.oncanplay()方法中进行截图。

图片转Base64

在开发的很多场景中需要用到base64图片形式进行传输，这种一般会用在缩略图的小文件图片中，提高浏览器的流畅性。
当然在canvas画布中，当进行绘制图片时，最好还是先将图片img标签转换为base64之后进行drawImage()，避免画布被污染和跨域等问题。

代码如下：


图片转Base64
转换成base64形式

效果如下：
在这里插入图片描述

上一篇：我来分享「战神牛牛」究竟有挂吗

下一篇：实测推荐.约战麻将辅助软件.果然有挂!

get两个js小技能——JS截取视频第一帧图片转Base64

目录

背景

JS截取视频第一帧

图片转Base64

相关内容

热门资讯