javascript - 为什么没有图像数据引用？

Question

是的，我知道 .getImageData()

我的意思是，比方说，我必须更改一些像素:

var imageData = ctx.getImageData(...);

似乎，这种方法给了我“真实”(隐藏在我深处的某个地方)图像数据的全新副本。我这么说是因为如果你创建一个新的:

var imgData2 = ctx.getImageData(.../*same parameters as before*/);

并比较两个缓冲区:

imageData.data.buffer === imgData2.data.buffer; //false

因此，每次它都会从其位图创建新副本。天哪，为什么？好吧，更进一步:

/*...apply some new changes to the imageData in a loop...*/

上面没什么特别的。但现在，是时候把它放回去了:

ctx.putImageData(imageData, ...);

这个在其内部运行新循环并复制我的图像数据。

这么多额外的工作!有没有一种方法可以获取实际的 imageData 并在不使用 get/put 的情况下对其进行操作？如果没有 - 我会再问 - 为什么？是安全原因吗？他们担心我能用这些像素做什么？

谢谢!

Answer 1

简短回答:
没有。

没那么长答案:
您也许可以通过some hacks来实现它但这会很痛苦。

说明:
根据the specs , getImageData 返回一个 TypedArray，其中包含 Canvas 的图像数据，而不是指向作为可修改对象的实时 imageData 的指针。

要在 Canvas 上绘画，您必须使用 fill、lines、drawImage 或 putImageData 等方法>; 这样就更没有意义了，因为每次迭代数组时，实际的 Canvas 图像都会被修改。

每次调用 getImageData 时，都会创建并填充一个新的 TypedArray (请注意选择实际类型 is up to the UA )与canvasImage的当前数据。这样，您可以调用此方法，对 ArrayBuffer 进行不同的更改，而无需修改 Canvas 中的实际图像(以便您可以存储它，或再次调用该方法)。

至于为什么每次调用时返回的 ImageData 的缓冲区不相同，我认为这是因为“像素必须作为非预乘 alpha 值返回”，但为了性能，他们确实将其存储为预乘的。您可以看到here来自 Firefox 源代码的反预乘操作，实际上填充了一个新的 Uint8ClampedArray。
此外，它避免检查自上次调用以来 canvasImage 是否被修改，并确保您始终获得其当前的 ImageData。