使用 webworker 计算文件 MD5 和获取图片元数据

前言

最近做广告平台的需求比较多一些，然后会有一个需求是获取到广告主上传的素材元数据信息，例如图片获取宽高、颜色、MD5 等，视频资源获取视频宽高，视频时长等，这些在后台获取如果通过同步方式就会有一个比较大的问题，读取文件时间不确定，如果文件过大，很可能造成当前 tab 或者浏览器崩溃，所以需要通过 web worker 多线程获取这些元数据信息，本文为web worker 的使用总结

同步获取 MD5

之前一般通过同步方式获取，如下：

这种方式如果是大文件或者批量的文件直接丢到内存会造成主线程卡顿等问题，所以我们需要通过分片并使用 web worker 来获取

分布获取 MD5

首先需要通过 File.Slice 将文件分片，并将分片内容丢给 Spark-md5 处理

spark-md5介绍：SparkMD5 is a fast md5 implementation of the MD5 algorithm. This script is based in the JKM md5 library which is the fastest algorithm around. This is most suitable for browser usage, because nodejs version might be faster.

使用 File.Slice 将文件分片处理

创建 web worker

代码如下：

调用如下：

Web Worker中计算图片宽高和颜色

延伸：目前已经实现了分片获取文件的 MD5，但例如图片我们还需要获取图片的宽高和颜色信息，在JavaScript中，虽然我们通常通过创建Canvas并传入图片对象来直接获取图片的宽高和颜色信息，但在Web Worker环境中，由于缺乏document对象，传统的new Image()和document.createElement(‘canvas’)方法不再适用。然而，幸运的是，JavaScript还提供了两个强大的对象——OffscreenCanvas和ImageBitmap，它们同样在Web Worker中得到支持，使得在无文档对象的环境中操作图片成为可能。

OffscreenCanvas 是 HTML5 Canvas API 的一种扩展，它允许开发者在独立的画布上进行绘图操作，而不是直接在主屏幕画布上操作。这种方法的优点在于可以显著提升性能，尤其是在需要频繁重绘或动态更新的场景中

ImageBitmap 是一种用于Web上的图像处理技术，旨在提高在Canvas中绘制图像的性能。它表示一个位图图像，该图像可以绘制到Canvas上，同时具有低延迟的特性。与传统的ImageData对象相比，ImageBitmap的主要区别在于它可以直接由GPU处理和绘制，而不需要经过CPU的额外操作，从而提高了性能

代码实现：

上面文件为图片颜色的一些支持方法

然后修改下 Web Worker 方法

当前我们就完成了通过 Web Worker 计算文件的 MD5，获取图片的宽高等信息