HTML5-Canvas: Wechsel zwischen Farbe/Graustufenbild

Question

Ich habe ein HTML5-Canvas-Element, in dem ein Benutzer ein Farbfoto dynamisch verschieben, seine Größe ändern und drehen kann.

Ich möchte, dass der Benutzer zwischen Graustufen und Farbe wechseln kann.

kann ich zwei Ansätze denken, aber weder ist ideal:

1) Re-mache das Farbbild in Graustufen (unter Verwendung eines Pixel-für-Pixel-Loop) auf jeder Größe und dreht Ereignis (was sein könnte mehrere Male pro Sekunde)

2) Erstellen Sie eine Graustufenversion serverseitig, und wenden Sie alle Zeichenumwandlungen auf beide Bilder an, aber zeigen Sie jeweils nur eines von ihnen auf einmal an, abhängig von der Umschaltauswahl.

Kann jemand eine bessere Lösung als diese beiden denken - oder, wenn keine bessere Lösung existiert, überlegen Sie, welche der beiden die bessere Wahl wäre?

Aktualisierung:I implemented the method suggested below by Phrogz.

Answer 1

Erstellen Sie eine zweite Zeichenfläche (Sie müssen sie nicht einmal an das Dokument anhängen) und verwenden Sie drawImage(), um das Farbbild darauf zu kopieren, und verwenden Sie dann (einmal) getImageData()/putImageData(), um Graustufen zu erstellen.

Verwenden Sie diese Zeichenfläche als Quelle für zukünftige Aufrufe an drawImage(), wenn Sie die Graustufenversion benötigen, andernfalls verwenden Sie das Originalbild.

Sie transformieren den Kontext, z. context.translate()/context.rotate()/context.scale(), um das Bild leicht zu zeichnen, oder? Es gibt keinen Grund, das Quellbild weiter zu drehen oder seine Größe zu ändern, während der Benutzer es transformiert.

Answer 2

Sie können auch beide Bilder auf zwei Leinwände (oder eine große) zeichnen. Diese Leinwand muss wahrscheinlich nicht einmal zur Seite hinzugefügt werden, sie kann nur das Element sein.

Dann zeichnen Sie das richtige Bild von diesem Canvas mit den eingebauten Methoden zum Haupt-Canvas. Dies ist sowohl schnell als auch ohne serverseitigen Code.

Sie könnten sogar die Konvertierung in Graustufen in einem Webworker durchführen, aber das hängt davon ab, ob Ihre Kunden dies unterstützen.