Javascript 如何在webworker中使用OffscreenCanvas根据给定的本地url调整图像大小，并将调整大小的数据返回到主线程？

我想从主线程卸载图像加载和调整大小。读过这篇文章后，我的选择似乎是将

fetch

OffscreenCanvas

和

WebWorker

结合起来

到目前为止，我在我的webworker代码中进入了以下阶段：

我将

imageUrl

传递给web worker，然后获取，这使我能够访问blob格式的图像数据

然后，我创建了一个屏幕外画布，以便为调整图像大小做准备（画布似乎是我在网上找到的最常用的方法）

示例代码如下所示

const response = await fetch(imageUrl);
const blob = await response.blob();
const canvas = new OffscreenCanvas();

我被困在这个阶段。到目前为止，我找到的所有示例都使用

Image（）

从url创建图像并访问其宽度/高度值，以及将数据加载到画布上

在我的情况下，我只能访问blob，因为我们在webworker中，所以我无法创建

新图像（）

，因此我不确定如何继续

---

理想的情况是，我们将图像块加载到画布上，将其调整为50%，并将图像的Base64或Bulbl返回到主线程。

< P>因为您没有查看所有浏览器的支持，我猜，您可能会考虑使用<代码> CeaMateMeBITMAP（）/<代码>方法，它获取其他

Blob

数据并返回

ImageBitmap

。它可以用来读取获取图像的高度和宽度，也可以在屏幕外的画布上绘制图像

详情如下：