Cambiar el color de una imagen en un sitio web

Tengo esta imagen en mi sitio web, es un png:

ingrese la descripción de la imagen aquí

Quiero saber si hay alguna forma con HTML5, javascript o css para cambiar el color de la imagen. O al menos hacer que la imagen cambie a blanco (invertir el color negro a blanco, no la transparencia).

Respuestas (4)

No estoy seguro de que esto pertenezca a GD, pero...

Se puede hacer usando el CANVASelemento de HTML5, aquí hay un súper rápido y sucio:

<!DOCTYPE html>
<html>
  <head>
    <script type="text/javascript">
    window.onload = function(){
        var imageObj = new Image();
        imageObj.onload = function(){ alterImage(this); }
        imageObj.src = document.getElementById( "origImg" ).src;
    }

    function alterImage(imageObj){
        var canvas = document.getElementById("myCanvas");
        var ctx= canvas.getContext("2d");

        ctx.drawImage(imageObj, 0, 0);
        var id= ctx.getImageData(0, 0, canvas.width, canvas.height);

        // Iterate over data.  Data is RGBA matrix so go by +=4 to get to next pixel data.
        for (var i = 0; i < id.data.length; i += 4) {
            // Check if RGB == 0 (black)
            if ( id.data[i] + id.data[i+1] + id.data[i+2] == 0 )
                id.data[i] = 255; //change R bit to 255.
                // change G & B bits to 255 also if you want white.
        }

        // redraw your altered data on the canvas.
        ctx.putImageData(id, 0, 0);
    }
    </script>
  </head>
  <body>
    <img id="origImg" src="test.png" alt="Original image">
    <canvas id="myCanvas" width="250" height="100"></canvas>
  </body>
</html>

¡PERO NO QUIERES HACER ESTO!

Problemas:

  1. getImageDatarequiere elevación de privilegios a menos que las imágenes de origen estén alojadas en el mismo dominio que el script. No puede usar ningún servicio de alojamiento a menos que quiera molestar a los usuarios con avisos de escalada privada.
  2. Si su usuario tiene Javascript deshabilitado o un navegador antiguo que no es compatible con HTML5, no funcionará.
  3. HTML5 todavía está en borrador, por lo que la canvasimplementación podría cambiar.
  4. Le está pidiendo a sus navegadores que procesen la imagen por usted cada vez que se carga la imagen. Si solo está utilizando unos pocos colores básicos, es mejor que haga su propio procesamiento y determine qué imagen publicar en el momento de la respuesta en lugar de esperar que se procesen. (Y, si le importa, desde un punto de vista "verde", termina pidiéndoles a los usuarios que reproduzcan exactamente la misma versión "Color X" innumerables veces usando innumerables ciclos de CPU que usan más energía y bla, bla, bla).

Puede ahorrar ciclos de CPU para usted y sus usuarios simplemente creando los colores que necesita en el lado del servidor (hay scripts que pueden hacer esto por usted) y sirviéndoles los colores que necesitan. Solo desea usar canvaspara esto si no tiene otra opción (por ejemplo, el usuario está determinando el color sobre la marcha).

También se han hecho preguntas similares en SO varias veces:

Muchas gracias por la respuesta, era algo así que estaba buscando recién implementado con algunas diferencias.

He hecho este tipo de cosas en el pasado colocando la imagen "después" detrás del "antes" en orden z y simplemente cambiando el alfa en la imagen frontal.

En realidad, puede simplificar ese paso hoy en día: simplemente agregue un estilo de fondo CSS a la etiqueta IMG "antes" y no se requiere la etiqueta IMG "después". Funciona en versiones recientes de todos los principales navegadores.
Bastante seguro. ¡Hay muchas formas de despellejar a los gatos en estos días!
¡El cumplimiento mejorado entre gatos realmente ha facilitado el desollado! ;-)
¡JAJAJA! ¡No es la verdad!
Guess podría encontrar algunas buenas respuestas AQUÍ

Esto funciona muy bien en casi cualquier navegador.

<img alt="" src="images/bd7VJ.png" style="filter:invert;" onmouseover="this.style.filter='none'" onmouseout="this.style.filter='invert'">

Espero que funcione para su proyecto.

Creo que sería principalmente solo para IE

No parece haber ninguna manera fácil de hacerlo. Si necesita 2 png, puede usar sprites css.

Cambiar el color de una imagen en un sitio web
RespuestasAquíPolítica de privacidad1y, 0v