Question

Canvas的上下文支持createImageData和putImageData，但是，paint worklet的paint方法中的上下文似乎不支持这些方法。我知道，它不允许从上下文中读取像素数据，如this document所述：

paint worklet的上下文与上下文不是100％相同。到目前为止，由于安全原因，缺少文本呈现方法 您无法从画布上读取像素。

我很惊讶，似乎也无法在画布上写入像素。我错过了什么还是什么？

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

Answer 1

current specs on the PaintRenderingContext2D的注释如下：

注意：PaintRenderingContext2D实现了CanvasRenderingContext2D API的子集。具体来说，它没有实现CanvasImageData，CanvasUserInterface，CanvasText或CanvasTextDrawingStyles API。

因此，不仅没有实现 getImageData 方法，而且还实现了整个CanvasImageData，其中包括

createImageData
getImageData
putImageData

可能值得注意的是，甚至没有在paintWorkletGlobalScope API上实现ImageData接口，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 ...

引起的潜在问题

如何处理CSS PaintWorklet上下文的像素数据？

1 个答案: