1

Canvas 的上下文支持createImageData，putImageData但是，paint workletpaint方法中的上下文似乎不支持这些方法。我知道它不允许从上下文中读取像素数据，因为它在本文档中明确说明：

绘制工作集的上下文与上下文并非 100% 相同。到目前为止，缺少文本呈现方法，出于安全原因 ，您无法从画布中读取像素。

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

这是我为演示该问题而制作的代码笔- 当我运行它时，ChromeUncaught TypeError: ctx.createImageData is not a function会在控制台中打印。

4

1 回答 1

2

PaintRenderingContext2D的当前规范有以下说明：

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

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

  • 创建图像数据
  • 获取图像数据
  • 放图像数据

可能值得注意的是，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引起的潜在问题......

于 2018-12-16T04:55:47.293 回答