javascript - HTML5 Canvas : Toggle between color/grayscale image

Question

我有一个 HTML5 canvas 元素，用户可以在其中动态移动、调整大小和旋转彩色照片。

我希望用户能够在灰度和颜色之间切换。

我可以想到两种方法，但都不理想:

1) 在每次调整大小和旋转事件(每秒可能发生几次)时将彩色图像重新渲染为灰度(使用逐像素循环)

2) 在服务器端创建一个灰度版本，并将任何 Canvas 转换应用于两个图像，但一次只显示其中一个，具体取决于切换选择。

谁能想到比这两个更好的解决方案——或者，如果不存在更好的解决方案，请猜测这两个中哪个是更好的选择？

更新: I implemented the method suggested below by Phrogz .

Answer 1

创建第二个 Canvas (您甚至不必将其附加到文档中)并使用 drawImage() 将彩色图像复制到其上，然后(一次)使用 getImageData()/putImageData() 使其变成灰度。

当您需要灰度版本时，使用此 Canvas 作为将来调用 drawImage() 的源，否则使用原始图像。

您正在转换上下文，例如context.translate()/context.rotate()/context.scale()，画图很简单吧？没有理由在用户转换源图像时继续旋转或调整源图像的大小。