加速html5画布中的像素操作



我在尝试进行一些图像过滤时速度较慢。我可以通过缓存所做的更改来解决这个问题。然而,在实现之前,我希望在不首先缓存的情况下尽可能多地优化它。基本上,它很慢,因为我正在修改多个单独的图像,每个图像重绘大约64x64像素。正如我所说,缓存会解决这个问题,但我想首先优化其他方法。

这是我的两个想法:

1.减少图像的复制

我已经有了我想修改的图像,存储在图像中,作为其中的一部分。换句话说,我有一个精灵表加载到内存中,因此有一部分图像我想修改以进行新绘制。有没有一种方法可以直接从图像中获取imageData,而不必先将图像绘制到新的画布上,然后再从中获得imageData?必须将图像复制到画布上,然后通过getImageData获取像素数据,这似乎效率很低。

2.使用drawImage而不是putImageData

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

感谢

1:No。您需要在画布上绘制图像才能获得图像数据。

2:您不能使用putImageData以外的任何东西绘制图像数据。正如您所说,将其缓存到一个新的画布或图像中就是解决此问题的方法。您可以使用drawImage绘制另一个画布,就像绘制图像一样。

最新更新