如何使用给定本地URL的OffscreenCanvas在Webworker中调整图像大小并将调整大小后的数据返回到主线程？

Question

我想从主线程上卸载图像加载和调整大小。阅读有关此内容后，看来我的选择是fetch OffscreenCanvas和WebWorker的组合。

到目前为止，我已进入Webworker代码的下一阶段：

1. 我将imageUrl传递给网络工作者，然后提取，这使我可以访问blob格式的图像数据

2. 然后我创建一个屏幕外画布以准备调整图像大小（画布是我在网上找到的最常见的方法）

示例代码如下

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

在这个阶段我被困住了。到目前为止，我发现的所有示例都使用Image()从url创建图像并访问其宽度/高度值，以及将数据加载到画布上。

就我而言，我只能访问blob，并且由于我们在Webworker中，因此无法创建new Image()，因此我不确定如何进一步进行操作？

理想情况下，下一步是将图像blob加载到画布上，将其大小调整为50％，然后将图像的base64或BlobUrl返回到主线程。

Answer 1

我想您可能并没有考虑所有浏览器的支持，因此可以考虑使用createImageBitmap()方法，该方法将获取其他Blob数据并返回ImageBitmap。可以用来读取获取的图像的高度和宽度，并将其绘制在屏幕外的画布上。

此处有更多详细信息：https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/createImageBitmap