图像预览和网络工作者

Question

是否可以在web worker中使用filereader api来加载图像，即预览/缩略图，从而防止主ui线程阻塞。

像this之类的东西，但是在Web工作者中包装cpu密集部分（主要是读取文件内容和缩放图像）

Answer 1

从工作者那里无法访问页面的DOM级别，因此您无法创建Image对象或画布（对于缩放部分），因此答案为否，因为您想要操作图像。

虽然可以通过ajax或FileReaderSync将图像文件加载到Web worker上，然后将其转换为base64数据url字符串并将其发送回主脚本，但是无法操作图像以创建缩略图。 （除非你知道png / jpg / bmp格式的文件规范，并希望硬编码直接在二进制字符串上工作的缩放函数，看起来不是很好吗？）

Answer 2

主线程称为UI线程，因为与UI直接相关的所有内容都必须在那里发生。您无法在Web Worker中操作DOM，但您可以在Web Worker中操作图像文件的二进制文件。在图像处理之后，您必须将数据传输到主线程并将其附加到DOM。然后浏览器将在主线程中呈现此图像。

Answer 3

如果可以的话，这是可能的。

• 从工作者向服务器发出ajax请求，将responseType设置为arraybuffer，将responseText设置为响应。
• 在服务器上假设PHP将请求的图像加载到GD表示中（createImageFromJpeg）。
• 获取每个像素信息（imagecolorat）。
• 提取RGBA颜色，（包）每个颜色并将它们添加到字符串中。
• 将该字符串发回给工作人员。
• 从响应中创建一个新的Uint8Array。
• 做一些操纵。
• 将所有权提交给主脚本。
• 将数据添加到画布。

需要阅读的内容：Sending Arraybuffer，Transferable Objects

写下整个脚本将超出范围。