我可以从服务人员的屏幕外画布创建一个 png 吗？答案

【问题标题】：Can i create a png from a offscreen canvas in service worker?我可以从服务人员的屏幕外画布创建一个 png 吗？
【发布时间】：2016-10-12 13:58:28
【问题描述】：

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

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

【问题讨论】：

我最初的想法是否定的，因为 WebWorker 将无法访问 DOM，因此无法访问画布或创建自己的画布。我也不确定您是否也可以将画布上下文传递给 WebWorkers，但这可能是一种研究途径。见Is there a way to create out of DOM elements in Web Worker?。您尝试从画布中使用哪些方法？
是的，甚至不能传递上下文，你会得到一个DataCloneError。
developer.mozilla.org/en-US/docs/Web/API/OffscreenCanvas 会有所帮助，但仅适用于 Firefox。
@Blindman67 如果您将此作为答案发布，我会将其标记为已接受。只有一个问题。如果您无法在 service worker 中创建 new Image()，如何从缓存/服务器中的现有图像加载 imageData？
您必须通读文档。您可以使用其中一种通信 API（webSockets、webRTC），但不确定它们在工作人员上下文中是否可用，但通过消息系统将数据传递给工作人员的开销并不大。

标签： javascript canvas service-worker

【解决方案1】：

对于 firefox，可以在 worker 中使用的非常方便的 API 是 OffscreenCanvas

【讨论】：

这看起来确实很方便。但根据你的链接，它现在也仅限于 webgl 上下文......
@Kaiido 有一些 JavaScript 库使用 webGL 实现了完整的 canvas2D API，它们可以在许多常见的使用要求下提供比 Native 2D API 更好的性能。

【解决方案2】：

在 Service Worker 中使用 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',
    });
  }));
);

【讨论】：