HTML5画布：在彩色/灰度图像之间切换

Question

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

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

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

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

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

任何人都可以想到比这两者更好的解决方案 - 或者，如果没有更好的解决方案，那么猜猜两者中哪一个会是更好的选择？

更新： I implemented the method suggested below by Phrogz。

Answer 1

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

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

您正在改变上下文，例如context.translate() / context.rotate() / context.scale()，轻松绘制图像，对吗？当用户正在对其进行转换时，没有理由继续旋转或调整源图像的大小。

Answer 2

您还可以将两个图像绘制到两个画布（或一个大画布）。该画布可能甚至不必添加到页面中，它可以只是元素。

然后使用内置方法从该画布将正确的图像绘制到主画布。这既快又不需要服务器端代码。

您甚至可以在网络工作者中转换为灰度，但这取决于您的客户是否支持它。