如何在给定本地 url 和 return 调整数据到主线程的情况下使用 OffscreenCanvas 在 webworker 中调整图像大小？
How to resize image in webworker using OffscreenCanvas given local url and return resized data to main thread?
我想从主线程卸载图像加载和调整大小。阅读此后，我的选择似乎是 fetch OffscreenCanvas 和 WebWorker.
的组合
到目前为止，我在 webworker 代码中进入了以下阶段：
我将 imageUrl 传递给网络工作者，然后我获取它，这让我可以访问 blob 格式的图像数据
然后我创建了一个离屏canvas来准备图像调整大小（canvas似乎是我在网上找到的最常用的方法）
示例代码如下所示
const response = await fetch(imageUrl);
const blob = await response.blob();
const canvas = new OffscreenCanvas();
我卡在了这个阶段。到目前为止我发现的所有示例都使用 Image() 从 url 创建图像并访问其宽度/高度值，以及将数据加载到 canvas.
在我的例子中，我只能访问 blob，因为我们在 webworker 中，所以我无法创建 new Image()，因此我不确定如何继续？
理想情况下，接下来会发生的是我们将图像 blob 加载到 canvas，将其大小调整为 50%，然后 return 图像的 base64 或 BlobUrl 到主线程。
由于您没有研究所有浏览器的支持我猜，您可以考虑使用 createImageBitmap() 方法，该方法采用 Blob 数据和 returns ImageBitmap .这可用于读取获取图像的高度和宽度，并将其绘制在屏幕外 canvas。
此处有更多详细信息：https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/createImageBitmap
我想从主线程卸载图像加载和调整大小。阅读此后，我的选择似乎是 fetch OffscreenCanvas 和 WebWorker.
到目前为止，我在 webworker 代码中进入了以下阶段：
我将
imageUrl传递给网络工作者，然后我获取它，这让我可以访问 blob 格式的图像数据然后我创建了一个离屏canvas来准备图像调整大小（canvas似乎是我在网上找到的最常用的方法）
示例代码如下所示
const response = await fetch(imageUrl);
const blob = await response.blob();
const canvas = new OffscreenCanvas();
我卡在了这个阶段。到目前为止我发现的所有示例都使用 Image() 从 url 创建图像并访问其宽度/高度值，以及将数据加载到 canvas.
在我的例子中，我只能访问 blob，因为我们在 webworker 中，所以我无法创建 new Image()，因此我不确定如何继续？
理想情况下，接下来会发生的是我们将图像 blob 加载到 canvas，将其大小调整为 50%，然后 return 图像的 base64 或 BlobUrl 到主线程。
由于您没有研究所有浏览器的支持我猜，您可以考虑使用 createImageBitmap() 方法，该方法采用 Blob 数据和 returns ImageBitmap .这可用于读取获取图像的高度和宽度，并将其绘制在屏幕外 canvas。
此处有更多详细信息：https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/createImageBitmap