时间戳

首页 > 解决方案 > 如何使用给定本地 url 的 OffscreenCanvas 调整 webworker 中的图像大小并将调整大小的数据返回到主线程？

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

问题描述

我想从主线程卸载图像加载和调整大小。在阅读了这个之后，似乎我的选择是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 返回到主线程。

标签： javascripthtml5-canvasblobwebglweb-worker

解决方案

由于您没有研究所有浏览器的支持，我猜您可能会考虑使用createImageBitmap()方法，该方法包含其他Blob数据并返回ImageBitmap。它可用于读取获取图像的高度和宽度，并将其绘制在屏幕外的画布上。

更多细节在这里：https ://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/createImageBitmap

推荐阅读