我可以在Service Worker中从屏幕外画布创建png吗？

Question

是否可以使用某些离屏画布从服务工作者创建动态生成的图像？

我可以想象这是一项非常新的技术，如果它存在这样的东西，但是我在规范中找不到有关创建画布的消息...在任何实验性标记后面甚至在有关它的讨论/问题中，是否可能在任何浏览器中使用？

Answer 1

对于Firefox，可以在工作人员中使用的非常方便的API是OffscreenCanvas

Answer 2

用于在服务工作者中使用OffscreenCanvas生成即时通知图像的代码示例：

// canvas.toDataURL() not available with OffscreenCanvas ?
const toDataURL = async (data) =>
  new Promise(ok => {
    const reader = new FileReader();
    reader.addEventListener('load', () => ok(reader.result));
    reader.readAsDataURL(data);
  });

const imageCanvas = async (title) => {
  const canvas = new OffscreenCanvas(192, 192);
  const ctx = canvas.getContext('2d');
  ctx.font = "30px Comic Sans MS";
  ctx.fillStyle = "red";
  ctx.textAlign = "center";
  ctx.fillText(title, canvas.width/2, canvas.height/2);
  // Hack-ish
  const blob = await canvas.convertToBlob();
  return await toDataURL(blob);
};

self.addEventListener("push", event =>
  event.waitUntil(Promise.resolve().then(async() => {
    let body, image;
    if (self.OffscreenCanvas) image = await imageCanvas('Hello Push');
    else body = 'Your Browser does not support OffscreenCanvas with Service Worker';
    console.log('[SW]', { image });
    return self.registration.showNotification('OffscreenCanvas Demo', {
      body,
      image,
      tag: 'canvas',
    });
  }));
);