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

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

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

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

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

2） 在服务器端创建灰度版本，并对两个图像应用任何画布转换，但根据切换选择，一次仅显示其中一个图像

有人能想出比这两个更好的解决方案吗？或者，如果没有更好的解决方案，猜猜哪一个是更好的选择

---

更新：。

您还可以在两张画布（或一张大画布）上同时绘制两幅图像。画布可能甚至不必添加到页面中，它可以是元素

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

您甚至可以在webworker中进行灰度转换，但这取决于您的客户端是否支持它。

创建第二个画布（您甚至不必将其附加到文档中），然后使用

drawImage（）

将彩色图像复制到其上，然后（一次）使用

getImageData（）/putImageData（）

使其变为灰度

当您需要灰度版本时，使用此画布作为将来调用

drawImage（）

的源，否则使用原始图像

---

您正在转换上下文，例如

context.translate（）/context.rotate（）/context.scale（）

，以便轻松绘制图像，对吗？在用户转换源图像时，没有理由继续旋转或调整其大小。

Nice writeup；我特别喜欢启发式灰度转换的链接。但是，请注意，不需要使用

toDataURL

将灰度画布转换为图像

drawImage（）

可以使用作为第一个参数传入的HTML画布而不是HTML图像元素来调用。