背景
最近在搬砖时遇到一个问题，在商详页面有些商品只有视频，没有封面图。
我们的交互是用户点击视频封面图调用 native 播放器播放视频，没有封面图视频就没有了载体，就不能展示了。
这个问题有3种解决方案:
- 后端处理：这种方案虽然可行，但是会影响接口性能，在商详这种关键页面得不偿失。
- 客户端处理：客户端处理需要在进入商详页面前预加载视频，会影响页面响应速度，也不太合理。
- 前端处理：前端处理必然会用到 video 标签来承载视频，考虑到 video 标签在移动端会有很多兼容性问题，处理起来很复杂，同时也会带来加载的性能消耗。
基于上述三个方案，我们决定在源头解决这个问题，在创建商品时动态获取视频封面并保存。
考虑到这是一个公共能力，我们把处理逻辑写成公共的 npm 包 video-cover(www.npmjs.com/package/vid…) ,有兴趣的可以去 npm 上下载和使用。
接下来给大家分享一下这个包的实现方案和使用方法。
进入正题
效果展示
首先我们看下实际使用效果。
获取视频首帧整体过程是比较流畅的，当然，具体的获取时间取决于视频的质量和网速。
整体思路
- 动态创建 video 标签，加载视频。通过 video 的
timeupdate事件来获取截取图片的时机。 - 创建 canvas 画布，通过
drawImage来绘制图像，然后通过toDataURL来导出图像信息。 - 最后封装一些功能方法来方面使用。
兼容性
canvas 对我们来说是一个熟悉又陌生的技术，在一些技术文档种经常有它的身影出现，但是业务中使用到的地方又不是很多。
要使用这个技术，首先我们来看下兼容性，兼容性不好的话再好的技术也难以运用到业务中去。
从上图看来大部分浏览器兼容性没问题，话不多说，开始上代码
代码展示
首先我们要创建
video标签，这步是关键，图像能不能截取成功就取决于视频能不能展示了。
如果你使用的是网络图片，并且是跨域的。
必须要设置 video 的 crossOrigin = 'Anonymous'，对此元素的 CORS 请求将不设置凭据标志。
否则使用canvas的 toDataURL api会报错
提示：
Uncaught DOMException: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported
大概意思就是画布被污染。
文档：参考文档[1]
getVideoCover(callback) {
const self = this;
const video = this.video || document.createElement("video");
const currentTime = self.currentTime;
video.src = self.url;
video.style.cssText = `position: fixed; top: -100%; width: 400px; visibility: hidden;`;
video.controls = "controls";
// 此处是设置跨域，防止污染canvas画布
video.crossOrigin = "Anonymous";
// 设置视频播放进度
video.currentTime = currentTime;
// 监听播放进度改变，获取对应帧的截图
video.addEventListener("timeupdate", () => {
self.setVideoInfo();
if (self.currentTime <= self.duration) {
self.generateCanvas(callback);
} else {
self.nextTime()
}
});
this.video = video;
// 此处必须要append到页面中去，否则会由兼容性问题
document.body.appendChild(video);
}
通过修改 video 的 currentTime 属性，来切换视频的进度，从而触发 timeupdate 事件，完成截图操作。
创建完 video ，接下来就是最关键的部分了，图片生成。
主要思路：
- 首先创建一个
canvas。 - 添加对应的尺寸，这个尺寸尽量和视频的比例保持一致，否则生成的图片会变形。
- 通过
toDataURL生成base64，直接在页面展示就可以了。
generateCanvas(callback) {
const self = this;
const canvas = this.canvas || document.createElement("canvas");
// 此处添加 alpha 属性，可以忽略透明度，减少图片体积
const ctx = canvas.getContext("2d", { alpha: false });
const imgWidth = this.imgWidth;
const isCheckImageColor = this.isCheckImageColor;
let videoWidth = this.videoWidth;
let videoHeight = this.videoHeight;
if (!this.canvas) {
if (imgWidth) {
videoHeight = imgWidth / (videoWidth / videoHeight);
videoWidth = imgWidth;
}
canvas.width = videoWidth;
canvas.height = videoHeight;
}
ctx.drawImage(this.video, 0, 0, canvas.width, canvas.height);
// 如果开启图片校验模式
if (isCheckImageColor) {
const checkImageResult = this.checkImage(ctx, videoWidth, videoHeight);
// 如果图片是纯色图片，会获取切换播放时间，获取下一秒的截图
if (!checkImageResult) {
this.nextTime();
return;
}
}
const img = canvas.toDataURL(this.imageType, self.quality);
callback && callback(img);
}
写到此处，基本的功能已经实现了，接下来就介绍一些工具方法来让我们的功能更加的完善。
-
图片内容校验。
有些视频的前 1s 是黑屏，这样截下来的图片是没有任何价值的，为了避免这种问题。我对视频做了是否是纯色的校验。使用
canvas的getImageData来获取图片像素信息。getImageData会返回一个Uint8ClampedArray的类型化数组。每一个值存储的是 0-255 的整型。
每4个为一组，分别代表 R G B A。
遍历整个数组，如果发现颜色值的种类超过配置的数量，即为有图像的图，否则为纯色图。
如果大家有更好的处理方案，欢迎在评论区域留言。
checkImage(ctx, width, height) { const imgData = ctx.getImageData(0, 0, width, height); const imgDataContent = imgData.data; const rgbObj = {}; let differentLen = 0; for (let i = 0, len = imgDataContent.length; i < len; i += 4) { const key = imgDataContent.slice(i, i + 4).join(""); if (!rgbObj[key]) { rgbObj[key] = 1; differentLen++; } // 判断如果颜色超出100种，不是纯图 if (differentLen > 100) { return true; } } return false; } -
base64转Blob对象。
图片本地下载和保存到服务器都需要将base64转换成 Blob对象。具体实现步骤为：
- 通过
window.atob方法将base64解码。 - 初始化一个
Uint8Array类型化数组。 - 遍历解码之后的
base64，将每个字符转换成Unicode码，并push到Uint8Array中。 - 最后通过
new Blob()来生成Blob对象。
static base64ToBlob(code) { if (!code) { console.warn("base64不能为空"); return; } let parts = code.split(";base64,"); // 获取图片类型 let contentType = parts[0].split(":")[1]; /** * 解码base64 * Window atob() 方法 * encodedStr: 必需，是一个通过 btoa() 方法编码的字符串。 * 该方法返回一个解码的字符串。 */ let raw = window.atob(parts[1]); let rawLength = raw.length; // Uint8Array 数组类型表示一个8位无符号整型数组，创建时内容被初始化为0。 let uInt8Array = new Uint8Array(rawLength); // 将字符转换成unicode值 for (let i = 0; i < rawLength; ++i) { uInt8Array[i] = raw.charCodeAt(i); } return new Blob([uInt8Array], { type: contentType, }); } - 通过
-
下载文件
static downloadFile(code) { const fileName = Date.now(); if (!code) { console.warn("base64不能为空"); return; } let aLink = document.createElement("a"); let blob = this.base64ToBlob(code); let evt = document.createEvent("HTMLEvents"); evt.initEvent("click", true, true); //initEvent 不加后两个参数在FF下会报错 事件类型，是否冒泡，是否阻止浏览器的默认行为 aLink.download = fileName; aLink.href = URL.createObjectURL(blob); aLink.click(); }
接下来介绍下使用方法
通过 new VideoCover() 来初始化配置信息
const cover = new VideoCover({
// 视频链接
url: 'https://cdn.huodao.hk/zhaoliangjiadv2.mp4',
// 初始截图位置，取值范围 1- 视频长度，默认为 1
currentTime: 1,
// 生成图片宽度，高度按照视频比例自动计算，默认为800px
imgWidth: 600,
// 图片质量，范围 0.2-0.95，默认为 0.95
quality: 0.9,
// 图片类型，默认为 image/jpeg
imageType: 'image/jpeg',
// 是否开始图片检查，如果为纯图自动获取下一秒，默认为false
isCheckImageColor: true,
})
api方法
-
生成截图
getVideoCover
参数：
@param { Function } callback 回调函数 示例：cover.getVideoCover((res) => { console.log(res) }) -
获取下一秒视频截图 nextTime 参数：无 示例：
cover.nextTime() -
获取指定位置视频截图 jumpTime 参数： @param { Number } time 时间秒数 示例：
cover.jumpTime(20)
最后试了一下，在 chrome，firefox 等主流浏览器都是可以的。
由于 video 在移动端的兼容性不是很好，此插件适用于 PC 端。
未来我们会兼容移动端，希望能在更多的平台得到运用。
npm包地址：www.npmjs.com/package/vid…
最后
最后，感谢您的阅读，有任何问题，欢迎评论区留言讨论，互相学习~ 本月我们将推出更多实践相关文章及有奖留言活动，也欢迎扫描下方二维码关注我们的微信公众号及时获取 ↓
参考文档：
-
安全性和“被污染”的 canvas
developer.mozilla.org/zh-CN/docs/… -
Uint8Array
developer.mozilla.org/zh-CN/docs/… -
Base64的编码与解码
developer.mozilla.org/zh-CN/docs/… -
createObjectURL developer.mozilla.org/zh-CN/docs/…
