Tengo una imagen de 100x100:
<img id="my-face" src="/my-face.jpg" />Obtengo todos sus píxeles y calculo el RGB promedio de esa imagen:
let img = document.getElementById('my-face') let avgRgbOfImg = getAverageRGb(img)También tengo una referencia RGB de un color diferente:
let refRgb = [255, 244, 50] // yellow Sé que ahora quiero agregar un filtro a la imagen, para que avgRgbOfImg se acerque bastante a mi refRgb :
addFilter(refRgb).to(img) let newAvgRgb = getAverageRGb(img) // should be pretty close to `refRgb` (yellow) En términos más simples, tengo una imagen y quiero usar canvas (o p5.js) para agregarle un filtro de color para que avgRgbOfImg se acerque bastante a ese color.
¿Hay algún conjunto de métodos canvas/p5 para lograr esto?
Interesante enfoque usando RGB para obtener el color promedio.
En el pasado, respondí una pregunta vagamente similar pero haciendo una búsqueda básica de imágenes basada en el color promedio . En lugar del espacio de color RGB, he usado el espacio de color L a b*, que es un espacio de color perceptivo. Simplemente usé esta implementación de las rgb2xyz -> xyz2lab y back desde aquí (si elimina algunas palabras clave y tipos, esa sintaxis es más o menos javascript por cierto)
Es posible que obtenga resultados ligeramente mejores, pero según la demostración que publicó, es de esperar que no sea muy diferente. ¿Justifica la complejidad? No estoy seguro.
Hablando de complejidad, podría llegar hasta las redes neuronales profundas. Haciendo una búsqueda rápida, Transferencia de color progresiva con correspondencias semánticas densas junto con una implementación relacionada . Tal vez de forma indirecta, el modelo PyTorch podría entrenarse y exportarse a Tensorflow.js ( PyTorch -> ONNX -> TensorFlow -> TensorFlow.js ) y usarse directamente o integrarse con ml5.js similar al modelo StyleTransfer . Tal vez podría producir resultados interesantes, pero seguramente será un enfoque complejo.
Si ya conoce el color RGB promedio de una imagen y busca una aproximación/aspecto similar, ¿qué le parece "fingir" simplemente tiñendo la imagen a través de tint() ? Incluso podría controlar la cantidad de tinte usando el argumento 4th (alfa):
// apply 50% of refRgb tint(refRgb[0], refRgb[1], refRgb[2], 128); image(theImageYouWanTinted, 0, 0);Seguro que la salida será una mezcla de la imagen de origen y refRgb, pero es muy fácil de probar si visualmente logra lo que buscas.
Luego podría expandir y probar otras cosas, por ejemplo:
Es difícil medir qué tan precisas y complejas deben ser las cosas: simplemente elegiría tint() primero. (Si necesita "congelar" el resultado teñido en píxeles, recuerde que siempre puede obtener una "instantánea" de lo que se dibujó usando get() y se pueden lograr cosas más complejas usando una capa p5.Graphics (ver createGraphics() )) ;