如何操作 CSS PaintWorklet 上下文的像素数据？

Question

Canvas' context 支持 createImageData 和 putImageData，但是，paint worklet 的 paint 方法中的 context 似乎不支持这些方法。我知道它不允许从上下文中读取像素数据，因为它在 this document:

中有明确说明

A paint worklet’s context is not 100% the same as a context. As of now, text rendering methods are missing and for security reasons you cannot read back pixels from the canvas.

我很惊讶，似乎也无法将像素写入 canvas。我是漏了什么还是什么？

这是我用来演示问题的 codepen - 当我 运行 它时，Chrome 在控制台中打印 Uncaught TypeError: ctx.createImageData is not a function。

Answer 1

current specs on the PaintRenderingContext2D有这样的注释：

Note: The PaintRenderingContext2D implements a subset of the CanvasRenderingContext2D API. Specifically it doesn’t implement the CanvasImageData, CanvasUserInterface, CanvasText, or CanvasTextDrawingStyles APIs.

所以不仅 getImageData 方法没有实现，整个 CanvasImageData 方法都没有实现，其中包括

• createImageData
• getImageData
• putImageData

---

可能值得注意的是，ImageData 接口甚至没有在 paintWorkletGlobalScope API 上实现，ImageBitmap 接口也没有实现，所以我们可以 而不是 甚至做类似

的事情

const i_data = new ImageData(w, h);
// some pixel manips
createImageBitmap(i_data).then(img => {
  ctx.globalCompositeOperation = 'copy';
  ctx.drawImage(img,0,0);
});

尽管这本来是一种做你想做的事情的方法，但没有由 getImageData...

引发的潜在问题