HTML5 canvas: переключение между цветным / серым изображением

Question

У меня есть элемент холста HTML5, в котором пользователь может динамически перемещать, изменять размер и поворачивать цветную фотографию.

Я бы хотел, чтобы пользователь мог переключаться между оттенками серого и цветом.

Я могу придумать два подхода, но ни один из них не идеален:

1) Повторная визуализация цветного изображения в градациях серого (с использованием попиксельного цикла) при каждом событии изменения размера и поворота (которое может быть несколько раз в секунду)

2) Создайте версию сервера в градациях серого и примените любые преобразования холста к обоим изображениям, но одновременно отображайте только одно из них, в зависимости от выбора переключения.

Может ли кто-нибудь придумать лучшее решение, чем эти два, или, если лучшего решения не существует, угадать, какое из двух будет лучшим выбором?

Обновление: Я реализовал метод, предложенный ниже Phrogz .

Answer 1

Создайте второй холст (вам даже не нужно добавлять его в документ) и используйте drawImage(), чтобы скопировать на него цветное изображение, а затем (один раз) используйте getImageData()/putImageData(), чтобы сделать его серым.

Используйте этот холст в качестве источника для будущих вызовов drawImage(), когда вам нужна версия в оттенках серого, в противном случае используйте исходное изображение.

Вы преобразуете контекст, например context.translate() / context.rotate() / context.scale(),нарисовать изображение легко, верно?Нет причин продолжать вращать или изменять размер исходного изображения, так как пользователь преобразовывает его.

Answer 2

Вы также можете нарисовать оба изображения на двух холстах (или на большом).Этот холст, вероятно, даже не нужно добавлять на страницу, это может быть просто элемент.

Затем вы рисуете правильное изображение с этого холста на главном холсте, используя встроенные методы.Это будет быстро и не потребует кода на стороне сервера.

Вы даже можете выполнить преобразование в оттенки серого в веб-приложении, но это зависит от того, поддерживают ли его клиенты.