加速html5画布中的像素操作

Question

我正在尝试做一些图像过滤，这有点慢。我可以通过简单地缓存我所做的更改来解决我遇到的问题。但是，在我实现之前，我想尽可能地优化这一点而不首先进行缓存。基本上，它很慢，因为我正在修改每个重绘大约64x64像素的多个单独图像。正如我所说，缓存将解决这个问题，但我想首先优化其他方法。

这是我有过的两个想法：

1.减少图像复制

我已经将想要修改的图像存储在图像中作为其一部分。换句话说，我有一个精灵表加载到内存中，因此我想要为新绘制修改一部分图像。有没有办法直接从图像中获取imageData，而不是先将图像绘制到新的画布，然后从中获取imageData？将图像复制到画布似乎效率低下，然后通过getImageData获取像素数据。

2.使用drawImage而不是putImageData

drawImage似乎比putImageData快得多。但我找不到任何方法可以通过drawImage将修改后的像素数据绘制到画布上，并完全避免使用putImageData。有办法吗？

由于

Answer 1

1：否。您需要在画布上绘制图像以获取图像数据。

2：你不能使用putImageData以外的任何东西绘制imagedata。正如您所说，将其缓存到新画布或Image中就是解决方案。您可以使用drawImage绘制另一个画布，就像绘制图像一样。