学学javascript如何截取视频第一帧(2)-木庄网络博客

这时候，你就需要认识一个新属性了：Uint8ClampedArray

Uint8ClampedArray（8位无符号整型固定数组）类型化数组表示一个由值固定在0-255区间的8位无符号整型组成的数组；如果你指定一个在 [0,255] 区间外的值，它将被替换为0或255；如果你指定一个非整数，那么它将被设置为最接近它的整数。（数组）内容被初始化为0。一旦（数组）被创建，你可以使用对象的方法引用数组里的元素，或使用标准的数组索引语法（即使用方括号标记）。

如果对 Uint8ClampedArray 感兴趣，可以异步这里进一步研究 Uint8ClampedArray。

你是不是发现了什么？0~255这个是不是常见的数值，颜色的十六进制对应的数值。好，那么，接下来就是按照我们所思考好的去实现，看看是不是这么一个原理。

代码是实现了，那么结果呢，我这里分别使用白色图片，透明图片，黑色图片来对照一下，拿到的结果究竟是不是和我们所想象的一直的：首先我们来看一下透明图片：

可以看到，结果数组里面，全部是 0;

白色图片：

哎呦，全是255，那么黑色就应该全是0了，别急，让我们看一下

黑色图片：

出现了意想不到的数字，238，这是偏向255白色的色值，为什么会这样呢?其实是因为白色和透明色没有过度，而黑色是过度的，就是在canvas绘制的时候会出现这种问题，但是是可以忽略不计的。

知道了这三者的色值，那么接下来的判断也就好办了，直接在加一个条件就好了

为什么是200 和 0 呢？其实这俩个值你们可以根据实际情况去判断合理范围，200 对应的色值是#c8c8c8，是灰色，0是透明色，所以在这里就判断是无效图片了。只要brr数组里面没有值，就说明是无效图片。

那么实际情况如何呢？再来一张实际的对比图：

可以看到，brr里面是有值的，而且还是大量的，所以这正图片就是有效图片。

4. 最后

JavaScript截取视频第一帧就已经完毕了，如果还想优化就是针对无效图片的时候，使用默认图片展示即可。

四、总结

JavaScript截取视频第一帧，过程比较繁杂，而且涉及到很大量的数据循环，会造成一定的内存增长，但是确确实实能解决这个问题，并且已经已用到了企业资料中，其中使用了一个取巧优化的办法，只有brr数组有一个值被push进去，就直接break，这样可以极大的优化性能。如果大家还有更好的解决办法，可以多多交流！