阅读 540

前端JS实现视频截图并下载

1619406607866.jpg 最基本的实现思路就是把视频画在canvas上,然后使用toDataURL导出Base64格式,赋给image的src进行图片预览,点击下载把Base64放到a标签的href属性中并模拟点击进行下载

<video src="1.mp4" id="video" controls width="300"></video>
<img src="" alt="" id="image" width="300">
<button id="shot">截屏</button>
<button id="download">下载</button>
复制代码

一个视频播放器,一个预览图片区域,一个截屏按钮,一个下载按钮

const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
const video = document.querySelector('#video');
const image = document.querySelector('#image');
const shot = document.querySelector('#shot');
const download = document.querySelector('#download');
let url = '';
复制代码

创建一个canvas,并获取页面中dom的引用

video.addEventListener('loadedmetadata', function (e) {
  canvas.width = this.videoWidth;
  canvas.height = this.videoHeight;
});
复制代码

当视频加载完成之后设置canvas的宽高

shot.addEventListener('click', function () {
  ctx.drawImage(video, 0, 0);
  url = canvas.toDataURL('image/jpg');
  image.src = url;
});
复制代码

点击截屏按钮,将视频画在canvas上,然后取dataURL,赋给image的src

download.addEventListener('click', function () {
  const a = document.createElement('a');
  const event = new MouseEvent('click');
  a.download = 'screen_shot';
  a.href = url;
  a.dispatchEvent(event);
});
复制代码

最后创建一个a标签,把刚才取到的url赋给href,创建一个点击事件并模拟点击事件进行下载

1619406637355.jpg

下载成功

文章分类
前端
文章标签