前言

上一章中已经实现了base64下载：浏览器网页JavaScript实现Base64转图片并下载。
以前一般截图都是在后台进行截图，前端直接获取现成的图片就可以了，现代浏览器网页可以做的事情越来越多，所以可以直接在网页上对视频进行截图，本章就讲讲如何实现JavaScript网页视频截图并下载原理和代码实现。

网页截图实现原理

1、创建canvas画板
2、将video标签当前播放画面绘制到canvas画板
3、利用canvas特性，将当前canvas画板画面转成base64图片
4、创建a标签
5、利用a标签的特性，将base64图片赋值到a标签实现下载截图
6、删除a标签

功能代码实现

实现分为两块，一块是视频截图，第二块是实现图片下载

截图实现

var canvas = document.createElement('canvas');
var img = new Image();/**
*视频截图并下载
* @param videoDomId 视频video标签的id
* @param width 下载的图片宽度
* @param height 下载的图片高度
* @param fileName 文件名（例如：截图.png）
*/
const screenshot = function (videoDomId,width,height,fileName) {canvas.width = width;//决定图片宽度canvas.height = height;//图片高度img.onload = (function () {const video_player=document.getElementById(videoDomId);canvas.getContext('2d').drawImage(video_player, 0, 0, canvas.width, canvas.height)img.src = canvas.toDataURL('image/png').replace('image/png', 'image/octet-stream')const screenShotImg = img.src.replace(/^data:image\/[^;]+/, 'data:application/octet-stream')//图片下载saveImage(screenShotImg, fileName)})()
}

图片下载实现代码

/**
*将base64赋值到a标签并下载截图
* @param data base64图片
* @param filename 下载截图名称
*/
const saveImage = function (data, filename) {let saveLink = document.createElement('a');saveLink.style = "display: none";saveLink.href = data;saveLink.download = filename;let event = document.createEvent('MouseEvents');event.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);saveLink.dispatchEvent(event);setTimeout(()=>function(){document.body.removeChild(saveLink);//删除临时a节点},500);
}