【发布时间】：2012-02-15 02:44:19
【问题描述】：
是否可以在 web worker 中使用 filereader api 来加载图像，即用于预览/缩略图，从而防止主 ui 线程阻塞。
类似于this，但将 CPU 密集型部分（主要是读取文件内容和缩放图像）封装在 Web Worker 中
【问题讨论】：
标签： javascript html html5-canvas filereader web-worker
【发布时间】：2012-02-15 02:44:19
【问题描述】：
从工作人员无法访问页面的 DOM 级别，因此您无法创建图像对象或画布（用于缩放部分），因此答案是否定的，因为您想操作图像。
虽然可以通过 ajax 或 FileReaderSync 在 web worker 上加载图像文件，将其转换为 base64 数据 url 字符串并将其发送回主脚本，但无法操作图像为了创建您的缩略图。 （除非你知道 png/jpg/bmp 格式的文件规范并且想要硬编码一个直接在二进制字符串上工作的缩放函数，看起来不太好啊？）
【讨论】：
主线程被称为 UI 线程，因为与 UI 直接相关的所有事情都必须发生在那里。您不能在 Web Worker 中操作 DOM，但您可以在 Web Worker 中操作图像文件的二进制文件。图像处理后，您必须将数据传输到主线程并让它附加到 DOM。然后浏览器会在主线程中渲染这个图像。
【讨论】：
如果可以的话，这是可能的。
- 从worker向服务器发出ajax请求，将responseType设置为arraybuffer，将responseText设置为response。
- 在服务器上，假设 PHP 将请求的图像加载到 GD 表示中 (createImageFromJpeg)。
- 获取每个像素信息（imagecolorat）。
- 提取 RGBA 颜色，（打包）每种颜色并将它们添加到字符串中。
- 将该字符串发回给工作人员。
- 从响应中创建一个新的 Uint8Array。
- 做一些操作。
- 将所有权提交给主脚本。
- 将数据添加到画布。
阅读内容：Sending Arraybuffer, Transferable Objects
写下整个脚本会超出范围。
【讨论】：