Canvas 图像处理：利用 Web Worker 优化主线程性能

Canvas 图像处理：利用 Web Worker 优化主线程性能

在浏览器中进行复杂的图像滤镜处理时，直接在主线程操作 Canvas 往往会导致界面卡顿。为了解决这个问题，我们可以将耗时的像素计算任务卸载到 Web Worker 中执行，确保 UI 响应不受影响。

主线程初始化与通信

首先需要在主线程创建 Worker 实例，并将 Canvas 的图像数据发送过去。注意 postMessage 传输的是数据的副本，对于大对象建议使用结构化克隆算法（Structured Clone Algorithm）。

// 创建 Worker 实例
var sunglassFilter = new Worker('sunglassFilter.js');

// 获取图像数据并发送给 Worker
// 参数封装在 event.data 中
sunglassFilter.postMessage(
    context.getImageData(0, 0, canvas.width, canvas.height)
);

// 监听 Worker 返回的处理结果
sunglassFilter.onmessage = function (event) {
    // 将处理后的图像数据放回 Canvas
    context.putImageData(event.data, 0, 0);
};

Worker 脚本内部逻辑

Worker 端接收消息后，直接访问 event.data 获取 ImageData 对象。这里需要注意，Worker 中的 console.log 不会打印到主浏览器的控制台，调试时需留意。

下面是一个具体的像素滤镜算法示例，展示了如何遍历像素数组并进行数值运算：

// sunglassFilter.js
onmessage = function (event) {
    var imagedata = event.data;
    var data = imagedata.data;
    var length = data.length;
    var width = imagedata.width;

    for (let i = 0; i < length; ++i) {
        // 跳过 Alpha 通道，仅处理 RGB
        if ((i + 1) % 4 != 0) {
            // 判断是否为行末像素
            if ((i + 4) % (width * 4) == 0) {
                // 行末像素向左平移处理
                data[i] = data[i - 4];
                data[i + 1] = data[i - 3];
                data[i + 2] = data[i - 2];
                data[i + 3] = data[i - 1];
                i += 4;
            } else {
                // 普通像素进行边缘检测类运算
                data[i] = 2 * data[i] - data[i + 4] - 0.5 * data[i + 4];
            }
        }
    }

    // 将结果传回主线程
    postMessage(imagedata);
};

通过这种方式，繁重的循环计算被隔离在独立线程中，主线程只需负责调度与渲染，从而保证了应用的流畅性。实际开发中，还可以结合 OffscreenCanvas 进一步提升性能。