Javascript加载Image到Offscreen Canvas，进行webp转换

Question

我最近使用 canvas 将图像转换为 webp，使用:

const dataUrl = canvas.toDataURL('image/webp');

但是对于某些图像，这会花费很多时间，例如 400 毫秒。

我收到了来自 Chrome 的警告，因为它阻止了 UI。

我想使用 Offscreen Canvas 在后台执行该转换。

但是:

1) 我不知道应该使用哪个 Offscreen Canvas : a] 新的 OffscreenCanvas() b] canvas.transferControlToOffscreen()

2) 我在图像对象 (img.src = url) 中加载本地镜像 url 以获取本地镜像的宽度和高度。但我不明白如何将 Image 对象转移到屏幕外的 Canvas，以便能够在 worker 中完成:

ctx.drawImage(img, 0, 0)

因为如果我不传输图像，worker 不知道 img。

Answer 1

您正面临一个 XY and even -Z problem在这里，但每个人都可能有一个有用的答案，所以让我们深入研究。

---

X。 不要使用 canvas API 进行图像格式转换。 Canvas API 是有损的，无论你做什么，你都会丢失原始图像中的信息，即使你传递无损图像， Canvas 上绘制的图像也不会与原始图像相同。
如果你传递一个已经有损的格式，比如 JPEG，它甚至会添加原始图像中没有的信息:压缩伪影现在是原始位图的一部分，导出算法会将这些视为它应该保留的信息，使你的文件可能比你给它的 JPEG 文件大。

不知道你的用例，很难给你完美的建议，但一般来说，使版本中的不同格式最接近原始图像，一旦它在浏览器中绘制，你至少已经晚了三步。

---

现在，如果您对此图像进行一些处理，您可能确实想要导出结果。
但是你可能不需要这里的 Web Worker。
是。在您的描述中占用最大阻塞时间的应该是同步 toDataURL()打电话。
您应该始终使用异步且性能更高的 toBlob()，而不是 API 中的这个历史错误。方法。在 99% 的情况下，你根本不需要数据 URL，几乎所有你想用数据 URL 做的事情都应该直接用 Blob 来完成。

使用这种方法，剩下的唯一繁重的同步操作就是在 Canvas 上绘画，除非您正在缩小一些巨大的图像，否则这不应该花费 400 毫秒。

但是由于 createImageBitmap，您无论如何都可以在最新的 Canvas 上让它变得更好方法，它允许您异步准备图像，以便完成图像解码，而所有需要完成的实际上只是一个放置像素操作:

large.onclick = e => process('https://upload.wikimedia.org/wikipedia/commons/c/cf/Black_hole_-_Messier_87.jpg');
medium.onclick = e => process('https://upload.wikimedia.org/wikipedia/commons/thumb/c/cf/Black_hole_-_Messier_87.jpg/1280px-Black_hole_-_Messier_87.jpg');

function process(url) {
  convertToWebp(url)
    .then(prepareDownload)
    .catch(console.error);
}

async function convertToWebp(url) {
  if(!supportWebpExport())
  console.warn("your browser doesn't support webp export, will default to png");

  let img = await loadImage(url);
  if(typeof window.createImageBitmap === 'function') {
    img = await createImageBitmap(img);
  }
  const ctx = get2DContext(img.width, img.height);

  console.time('only sync part');
  ctx.drawImage(img, 0,0);
  console.timeEnd('only sync part');
  
  return new Promise((res, rej) => {
    ctx.canvas.toBlob( blob => {
      if(!blob) rej(ctx.canvas);
      res(blob);
    }, 'image/webp');
  });
}

// some helpers

function loadImage(url) {
  return new Promise((res, rej) => {
    const img = new Image();
    img.crossOrigin = 'anonymous';
    img.src = url;
    img.onload = e => res(img);
    img.onerror = rej;
  });
}

function get2DContext(width = 300, height=150) {
  return Object.assign(
    document.createElement('canvas'),
    {width, height}
  ).getContext('2d');
}

function prepareDownload(blob) {
  const a = document.createElement('a');
  a.href = URL.createObjectURL(blob);
  a.download = 'image.' + blob.type.replace('image/', '');
  a.textContent = 'download';
  document.body.append(a);
}

function supportWebpExport() {
  return get2DContext(1,1).canvas
    .toDataURL('image/webp')
    .indexOf('image/webp') > -1;
}

<button id="large">convert large image (7,416 × 4,320 pixels)</button>
<button id="medium">convert medium image (1,280 × 746 pixels)</button>

---

Z。要从 Web Worker 在 OffscreenCanvas 上绘制图像，您将需要上面提到的 createImageBitmap。实际上，此方法生成的 ImageBitmap 对象是唯一的 图像源 值 drawImage()和 texImage2D() (*) can accept 在 Workers 中可用(所有其他都是 DOM 元素)。

这个ImageBitmap是transferable ，所以你可以从主线程生成它，然后将它发送给你的 Worker 而没有内存成本:

ma​​in.js

const img = new Image();
img.onload = e => {
  createImageBitmap(img).then(bmp => {
    // transfer it to your worker
    worker.postMessage({
      image: bmp // the key to retrieve it in `event.data`
    },
   [bmp] // transfer it
  );
};
img.src = url;

另一种解决方案是直接从 Worker 获取图像数据，并从获取的 Blob 生成 ImageBitmap 对象:

worker.js

const blob = await fetch(url).then(r => r.blob());
const img = await createImageBitmap(blob);
ctx.drawImage(img,0,0);

---

请注意，如果您在主页面中将原始图像作为 Blob(例如，来自 <input type="file">)，那么甚至不要直接使用 HTMLImageElement 或获取方式发送此 Blob 并从中生成 ImageBitmap。

*^{texImage2D 实际上接受更多的源图像格式，例如 TypedArrays 和 ImageData 对象，但是这些 TypedArrays 应该代表像素数据，就像 ImageData 一样，并且为了这个像素数据，您可能需要已经使用其他图像源格式之一在某处绘制图像。}