javascript - manipular - Eliminar el color de fondo de la imagen en HTML5 Canvas
manipular imagenes con javascript (1)
Estoy intentando quitar el fondo de una imagen de foto cargada en un lienzo HTML5. Piensa en algo así como un efecto de pantalla verde.
Estoy usando HTML / JS / jQuery
El fondo de la foto será, por ejemplo, una cortina verde. El color no será exacto al otro lado de la cortina debido a la iluminación y cosas por el estilo.
Lo que estoy haciendo ahora es tomar el valor RGB de un píxel en el que el usuario hace clic dentro del lienzo. Entonces se considera que es el fondo. Agregué el R + G + B de ese píxel para establecer lo que se considera como el fondo.
A continuación, reviso el lienzo, píxel por píxel, comprobando si el píxel está cerca del valor RGB establecido como fondo (por ejemplo, dentro de 50 arriba o abajo). Si coincide, cambio el píxel para que sea transparente dentro del lienzo.
Esto funciona bastante bien como una prueba de concepto, pero no lo suficientemente bien como para hacer algo con.
¿Alguien tiene alguna idea mejor sobre la resta de fondo?
¡Aclamaciones!
Eche un vistazo al algoritmo GrabCut o al algoritmo GrowCut ; el primero describiendo ''Extracción de primer plano usando gráficos graficados iterados'' y el último, ''Segmentación de imagen por los autómatas celulares''. Ambos documentos le darán una visión más profunda de algunos de los algoritmos más antiguos utilizados para eliminar datos de imágenes de fondo. Si pudieras implementar de alguna manera uno de esos algoritmos en Javascript, entonces creo que ya has llegado al límite.
La biblioteca de visión por computadora OPENcv (escrita en c / c ++) tiene muchos métodos eficientes de manipulación de imágenes para examinar. Podría intentar y portar uno de los métodos BackgroundSubtractor de la biblioteca OPENcv (que creo que se basa en parte en Chris Staufer y el algoritmo de WEL Grimson ) a Javascript y luego usar eso para analizar el fondo y por lo tanto restarlo, pero creo que se basan en progresivo marcos de video en lugar de imágenes estáticas.
El proyecto js-aruco en el código de Google ya ha portado algunas de las funcionalidades de la biblioteca OPENcv (la base de código está aquí ) por lo que es posible que desee buscar primero algo de inspiración y luego, si se siente valiente, eche un vistazo a cómo podría programar los algoritmos GrabCut o GrowCut