Estoy construyendo un editor de imágenes basado en la web, y todo parece funcionar bien hasta que se cargan imágenes muy grandes (> 5 MB), y luego operaciones como ajustar el brillo usando un control deslizante tardan un tiempo en reflejarse. El problema es bastante obvio, y eso se debe a que tengo que recorrer cada píxel (paso de 4) en context.getImageData().data para modificar el valor de cada píxel.

Revisé un par de editores de imágenes en línea ya existentes, y los suyos parecen funcionar bastante bien sin demoras.

Inicialmente, mi primer paso fue cambiar el tamaño de la imagen para que se ajustara al lienzo en la pantalla, lo que funcionó bien sin retrasos, pero la razón por la que cambié a modificar el tamaño de la imagen original fue porque el tamaño original no cambia en comparación con el de la pantalla que cambia. si el usuario cambia el tamaño de la pantalla (o si Chrome muestra la barra de descarga actual en la parte inferior del navegador), y dado que es constante, siempre puedo realizar un seguimiento de todas las operaciones de edición y luego mostrar en la pantalla basando la escala en ajustar la pantalla.

Me encantaría saber cómo puedo optimizar para imágenes de gran tamaño, sin perder la calidad del original (debido al cambio de tamaño, etc.). ¡Gracias!

[ACTUALIZADO]

Esto fue copiado de un comentario debajo de esta publicación.

JavaScript no es adecuado para la edición de píxeles de imágenes. Para eso está la GPU. La mayoría de las necesidades de manipulación de imágenes se pueden realizar mediante filtros, lienzos 2D estándar, ya que utilizan el hardware diseñado para la tarea. Si tiene necesidades de manipulación de PX personalizadas, WebGL es la solución".