引言
在前端开发中，我们经常需要对图片进行处理，其中一项重要的工作就是生成预览图。这里介绍一个能够使用 Web Worker 并支持多个并发任务的 npm 包：worker-generate-previews。
该包不仅能够帮助我们生成预览图，而且还可以优化我们的性能问题。
安装
我们可以使用 npm 来安装该包：
npm install -S worker-generate-previews
安装完成后，我们需要在相应的代码中引入：
import GeneratePreviews from 'worker-generate-previews';
使用方法
在使用该包之前，我们需要知道要渲染的图片的路径。后面的代码中，我们将使用相对路径。
const imgPath = './test-img.jpg';
接下来，我们需要创建一个实例：
const previewGenerator = new GeneratePreviews();
然后，我们需要通过该实例选取图片的方式来发送信息，以开始处理：
-- -------------------- ---- -------
------------------------------------------ -
------ -
-
------ ----
------- ----
----- ------
--
-
------ ----
------- ----
----- ------
--
--
-------------- -- ---------------------这段代码使用两个参数：图片的路径以及传递给处理程序的选项对象。选项对象具有以下字段：
- sizes: 用于指定生成图像的大小、格式以及文件类型。
- onProgress: 用于指定当处理程序正在处理某幅图像时需要执行的函数。
- imageSmoothingQuality: 用于指定以何种质量进行图像处理。
在这个示例中，我们生成了两个预览图像，一个大小为 200x200 像素，另一个大小为 400x400 像素。在处理过程中，我们还为 onProgress 参数设置了一个函数，用于在每次生成一个预览图像时记录状态。
最后，我们使用 then 函数获取结果。
多任务并发处理
使用 worker-generate-previews ，我们可以同时处理多个任务，而不会导致浏览器的挂起。
-- -------------------- ---- -------
-------------------------
------------------
-
------ -
-
------ ----
------- ----
----- ------
--
-
------ ----
------- ----
----- ------
--
--
-
--
-------------------------
------------------
-
------ -
-
------ ----
------- ----
----- ------
--
--
-
--
-------------------------------------------- -- ---------------------在该示例中，我们向创建的队列中添加了两个任务，分别用于处理两幅图像。接下来使用 generateQueue 函数启动队列。
总结
通过使用 worker-generate-previews ，我们能够生成预览图像，并且不会阻止浏览器的正常使用。我们还能够并行执行多个任务，从而获得更好的性能。这个 npm 包非常实用，无论是在个人项目中还是在企业级开发中都非常适用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600671178dd3466f61ffe68a