我可以从 service worker 中的屏幕外 canvas 创建 png 吗？

Question

是否可以使用一些屏幕外的服务工作人员创建动态生成的图像canvas？

我可以想象，如果它存在这样的东西，那将是一项非常新的技术，但我在规范中没有找到关于创建 canvas 的来源...是否有可能在任何浏览器中使用任何实验性标志或甚至有些 discussion/issue 关于它？

Answer 1

对于 firefox，可以在 workers 中使用的非常方便的 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',
    });
  }));
);

我可以从 service worker 中的屏幕外 canvas 创建 png 吗？

Can i create a png from a offscreen canvas in service worker?

javascript

canvas

service-worker