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 ( i = ; i < length; ++i) {
((i + ) % != ) {
((i + ) % (width * ) == ) {
data[i] = data[i - ];
data[i + ] = data[i - ];
data[i + ] = data[i - ];
data[i + ] = data[i - ];
i += ;
} {
data[i] = * data[i] - data[i + ] - * data[i + ];
}
}
}
(imagedata);
};
