加快 html5 画布中的像素操作

Question

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

这是我的两个想法：

1.减少图片的复制

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

2.使用drawImage代替putImageData

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

谢谢

Answer 1

1：不可以。您需要在画布上绘制图像才能获取图像数据。

2: 除了 putImageData 之外，您无法绘制图像数据。正如您所说，将其缓存到新的画布或图像中是解决此问题的方法。您可以像绘制图像一样使用 drawImage 绘制另一个画布。