HTML5 canvas：在彩色/灰度圖像之間切換

Question

我有一個HTML5 canvas元素，用戶可以在其中動態移動，調整大小和旋轉彩色照片。

我希望用戶能夠在灰度和顏色之間切換。

我能想到的兩種方法，但也不是理想的：

1）重新呈現在彩色圖像爲灰度（使用逐像素迴路）每調整大小和旋轉事件（其可以是每秒幾次）

2）創建一個灰度版本服務器端，並將任何畫布轉換應用於兩個圖像，但一次只顯示其中一個，具體取決於切換選擇。

任何人都可以想到比這兩個更好的解決方案 - 或者，如果沒有更好的解決方案存在，猜測兩個哪個會是更好的選擇？

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

Answer 1

創建第二個畫布（您甚至不必將其附加到文檔中）並使用drawImage()將彩色圖像複製到其上，然後（一次）使用getImageData()/putImageData()使其變爲灰度。

當您需要灰度版本時，將此畫布作爲未來調用drawImage()的來源，否則請使用原始圖像。

您正在改變上下文，例如， context.translate()/context.rotate()/context.scale()，輕鬆繪製圖像，對嗎？當用戶正在轉換源圖像時，沒有理由繼續旋轉或調整源圖像的大小。

Answer 2

您也可以將兩個圖像繪製到兩個畫布（或一個大畫布）。該畫布可能甚至不需要添加到頁面，它可以只是元素。

然後，您使用內置方法從該畫布繪製適當的圖像到主畫布。這將會很快並且不需要服務器端代碼。

你甚至可以在webworker中進行灰度轉換，但這取決於你的客戶是否支持它。