HTML5 canvas：在彩色/灰度图像之间切换
问题描述：
我有一个HTML5 canvas元素，用户可以在其中动态移动，调整大小和旋转彩色照片。HTML5 canvas：在彩色/灰度图像之间切换
我希望用户能够在灰度和颜色之间切换。
我能想到的两种方法，但也不是理想的：
1）重新呈现在彩色图像为灰度（使用逐像素回路）每调整大小和旋转事件（其可以是每秒几次）
2）创建一个灰度版本服务器端，并将任何画布转换应用于两个图像，但一次只显示其中一个，具体取决于切换选择。
任何人都可以想到比这两个更好的解决方案 - 或者，如果没有更好的解决方案存在，猜测两个哪个会是更好的选择？
答
创建第二个画布（您甚至不必将其附加到文档中）并使用drawImage()将彩色图像复制到其上，然后（一次）使用getImageData()/putImageData()使其变为灰度。
当您需要灰度版本时，将此画布作为未来调用drawImage()的来源，否则请使用原始图像。
您正在改变上下文，例如， context.translate()/context.rotate()/context.scale()，轻松绘制图像，对吗？当用户正在转换源图像时，没有理由继续旋转或调整源图像的大小。
答
您也可以将两个图像绘制到两个画布（或一个大画布）。该画布可能甚至不需要添加到页面，它可以只是元素。
然后，您使用内置方法从该画布绘制适当的图像到主画布。这将会很快并且不需要服务器端代码。
你甚至可以在webworker中进行灰度转换，但这取决于你的客户是否支持它。
好写生;我特别喜欢启发式灰度转换的链接。但是，请注意，您不需要使用`toDataURL`将灰度画布变为图像。可以使用作为第一个参数传入的HTML Canvas而不是HTML Image元素来调用`drawImage（）`。 – Phrogz 2011-01-13 03:47:23